bootstrap 垂直居中 布局_css经典布局系列一——垂直居中布局

元素水平垂直居中

设置两个盒子，关系是父子：父元素

child

复制代码

方法一：同宽高+padding

将父元素的width和height设置的和子元素的大小一样，然后设置父元素parent的padding。此时padding会将子元素挤进父元素的中间位置；

此时父、子元素的定位是否开启都可以；

*{

margin: 0;

padding: 0;

}

.parent{

width: 100px;

height: 100px;

/*将padding设置，来挤出来居中的样子；但是要注意的是，此时的width和height要和子元素的大小一样，否则还是不居中*/

padding: 100px;

border: 1px solid;

margin: 100px auto;

}

.child{

width: 100px;

height: 100px;

background: pink;

line-height: 100px;

text-align: center;

}

复制代码

方法二：absolute + margin:auto

父元素相对定位，子元素绝对定位；

绝对定位盒子模型有个特点：left+