div居中方法总结
在日常开发过程中，我们会经常使用到div居中来处理布局，今天我就把我在开发过程中，遇到的div居中处理方法总结一下，方便日后查看！
div{
margin:0 auto;
width:200px;
height:200px;
background-color: pink;
}
2、水平垂直居中之让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top:;
left:;
bottom:;
right:;
background-color: pink;
}
3、水平垂直居中之确定容器的宽高
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px; /* 外边距为自身宽高的一半 */
background-color: pink;
}
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
5、水平垂直居中之利用 flex 布局
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height:600px;
}
.container div {
width: 300px;
height: 300px;
background-color: pink;
}
6、div撑满整屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div撑满整屏</title>
<style>
.page{
background:pink;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
}
</style>
</head>
<body>
<div class="page"></div>
</body>
</html>
div居中方法总结的更多相关文章
- div 居中方法汇总
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 情况一: 父子容器宽高已知 方法一 html <div class= ...
- div居中方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 实现DIV居中的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- div居中和垂直居中的最简单方法
div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...
- DIV居中的经典方法
1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...
- 纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- div居中的三种方法
方法1: #div1{ width:200px; height:200px; background:green; position:absolute; left:0; top:0; right:0; ...
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
随机推荐
- CLion中出现错误add_dependencies called with incorrect number of arguments解决
出现这个错误以后我以为是IDE出现问题了,可是重新启动,打开其他的工程文件以后发现并没有这个错误,但是新建的文件却报错 然后就打开其他工程的Cmake_list.txt文件,发现最后一行是有工程文件夹 ...
- postgreSQL PL/SQL编程学习笔记（二）
Control Structures of PL/SQL Control structures are probably the most useful (and important) part of ...
- Unity---动画系统学习(4)---使用混合树(Blend Tree)来实现走、跑、转弯等的动画切换
1. 介绍 Blend Tree用于多个动画之间的混合,比如走到跑的切换.转弯的切换. 如果用动画学习笔记(3)中的方法,需要新建很多的状态,不仅麻烦,而且切换状态时也很容易不流畅. 而Blend T ...
- 根据枚举获取枚举的Description特性值
首先定义一个枚举:两个值:已确认.未确认. public enum ConfirmStatusEnum { [Description("未确认")] unconfirmed = , ...
- 使用Swagger生成简单接口文档
使用swagger通过简单的配置可以生成简单的接口文档: 依赖包: // Swagger2 compile 'io.springfox:springfox-swagger2:2.8.0' compil ...
- C. Enlarge GCD Codeforces Round #511 (Div. 2)【数学】
题目: Mr. F has nn positive integers, a1,a2,…,an. He thinks the greatest common divisor of these integ ...
- 通过CMD命令设置网络参数
在微软的Windows系统中,一般情况下都是在可视化界面中设置IP地址和DNS的,进入“本地连接”->“属性”->“TCP/IP协议”,设置IP和DNS.但有些情况是没有这个权限的,比如在 ...
- 【研究】CVE-2015-1635-HTTP.SYS远程执行代码漏洞（ms15-034）
1.1.1 漏洞描述 在2015年4月安全补丁日,微软发布的众多安全更新中,修复了HTTP.sys中一处允许远程执行代码漏洞,编号为:CVE-2015-1635(MS15-034 ).利用HTTP. ...
- jquery 去除字符串左右空格
/*** 删除左右两端的空格*/String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g, '');} 调用方式: v ...
- 文献综述二：UML技术在行业资源平台系统建模中的应用
一.基本信息 标题:UML技术在行业资源平台系统建模中的应用 时间:2015 出版源:Hans汉斯 文件分类:uml技术的应用 二.研究背景 为方便行业人员高效率地搜集专业知识,实现知识的共享.采用计 ...