水平垂直居中布局
含意:水平垂直方向上都是居中的
1.利用table-cell,使表格内容对齐方式为middle,实现垂直居中;然后根据是行内元素还是块级内容采取不同的方式达到水平居中。
#parent{
display:table-cell;
vertical-align:middle;
/*text-align:center;*//*如果是行内内容用这个*/
}
#child{
display:table;
/*margin:0 auto;*/ /*如果是块级元素添加这个*/
}
2.定位position
- 原理:子绝父相,top,right,bottom,left的值是相对于父元素尺寸的,margin或者transform(变换,可对元素进行位移、旋转、缩放、倾斜操作,支持2D或者3D转换,IE9+支持。)是相对于自身尺寸的,组合使用达到水平局中的目的。
#parent{
position:relative;}
#child{
position:absolute;
top:50%;
left:50%;
/*①定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
/*②transform: translate(-50%,-50%);*//*translate:transform(变换)的方法tanslate(位移)*/
}
若问尽可能多的实现水平垂直居中布局还有一种方法来解决:
将上下左右置为零并且给margin设置为auto
#parent{
position:relative;}
#child{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width: 200px;
height: 200px;
background: red;
}
3.利用flex实现:
flex会控制子元素的排列方式
#parent{
display:flex;
justify-content:center;//控制水平对齐
align-items: center;//控制垂直对齐
}