常见的水平居中布局方式

Posted 2020-10-12

在页面布局时，常常需要把某些元素水平居中放置，下面总结几种令元素水平居中的方法。
text-align：center
如果子元素是行内元素，那么可以设置其父元素的text-align:center，这样元素就能实现水平居中了。但是对于块元素此方法则行不通了。
margin:0 auto
如果元素属于块元素，可以设置元素的margin样式–margin:0 auto。但是仅仅设置margin还不行，必须设置其width长度；如果width设置为100%,元素则不能水平居中。
flex弹性布局
flex是CSS3新添加的一个属性，在子元素的宽度已知的情况之下，可以设置如下：
.son{
display: flex;
justify-content: center;
}
虽然flex简单快捷、代码量少，可以解决布局方面的很多棘手的问题，但是它的兼容性不是很好。

绝对定位position
使用绝对定位的方式也能实现水平居中，设置如下:
div{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
虽然使用position可以实现水平居中，但是当浏览器窗口大小变化时，其可能会出现其他的问题，譬如：元素挤满了某一行，导致元素的排列顺序零乱。