1、水平居中
1.1、行内元素直接水平居中(text-align)
text-align:center;
只要父元素设置该属性值,所有的行内子元素都会水平居中。且该属性有继承性
2、确定宽度的块级元素实现水平居中
2.1、自动边距实现水平居中(margin)
margin: 0 auto;
具有宽度的块级元素设置上面属性后就会在父元素中左右居中
2.2、绝对定位和负边距实现水平居中(absolute+margin)
.parent { position: relative; }
.children { width: 150px; height: 150px; background: #d780c9; position: absolute; left: 50%; margin-left: -75px; }
将父元素定位为 relative,子元素定位为 absolute,子元素就会相对于父元素进行定位,left 设为50%,margin-left 为宽度的一半,由此实现了左右居中。
2.3、绝对定位和0实现居中(absolute+left+right+top+bottom)
该方法可实现垂直水平居中
.parent { display: relative; } .children { width: 150px; height: 150px; background: #d780c9; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
将子元素设为 position: absolute + (left=0+top=0+right=0+bottom=0)+ margin: auto,将父元素定位为 relative,由此子元素将会在父元素中垂直水平居中。如果父元素没有相对定位,则该元素相对于整个窗口垂直水平居中。
3、不确定宽度的元素实现水平居中
3.1、绝对定位和transform实现水平居中(absolute+transform)
.children { position: absolute; left: 50%; transform: translateX(-50%); }
3.2、flex 布局实现水平居中
.parent{ display: flex; justify-content: center; }
3.3、table 加自动 margin 实现左右居中(table+margin)
.children { display: table; margin: 0 auto; }
在某一元素中设置display为table,左右外边距自动,由此可实现在父元素中左右居中。
3.4、设为行内元素实现水平居中(inline-block+text-align)
.parent { text-align: center; } .children { display: inline-block; /*或者: display: inline; */ }
子元素设为行内元素,父元素通过属性 text-align 设置行内元素居中。
4、垂直居中
4.1、flex实现垂直居中
.parent{ display: flex; align-items: center; }
4.2、绝对定位和负边距(absolute+margin)
.parent { position: relative; } .children { width: 150px; height: 150px; position: absolute; top: 50%; margin-top: -75px; }
4.3、table-cell实现垂直居中(table-cell+vertical-align)
.parent{ display: table-cell; vertical-align: middle; }
由此父元素中的子元素全部都实现了垂直居中
4.4、绝对定位和0
参考上面的2.3
4.5、绝对定位和transform
参考上面的3.1
详细参考:https://blog.csdn.net/dengdongxia/article/details/80297116