CSS元素居中

html中元素分为行内元素和块级元素。采用margin或者float来使元素居中，是比较常见的方法。

margin:0 auto只能用于块级元素，不能使行内元素居中。

参考知乎上为什么「margin:auto」可以让块级元素水平居中？，margin：0 auto，是左右外边距自适应，水平方向的 auto，其计算值取决于可用空间（剩余空间）。元素本身为块级元素，那么水平方向可用空间的距离为其包含盒的宽度（宽度=盒总宽度-（padding-left+padding-right+border-left-width+border-right-width+margin-left+margin-right））。

float:left;margin-left:块级元素或行内元素宽度/2;对块级元素和行内元素均有效，但是行内元素的width需要采用js来计算。

针对行内元素，如果不想采用js计算宽度，可以采用text-align属性来居中。在其父元素上设置display:block;text-align:center;可使行内元素居中显示。对设置了display:inline-block；的行内块元素也适用。

 

转载于:https://www.cnblogs.com/linxuehan/p/3905547.html