web前端入门到实战：总结让元素水平垂直居中的方法

前端开发过程中，元素的水平垂直居中处理是常见需求。以下是对几种实现元素居中的方法的总结。

水平居中方法之一是使用text-align：center；属性。在没有浮动的情况下，将需要居中的块级元素设置为inline/inline-block，然后在父元素上添加text-align：center；属性即可。对于直接是内联元素的块级元素（如span、img、a等），只需在父级元素上添加text-align：center；属性即可。

另一种水平居中方法是使用margin：0 auto；属性。这要求居中的元素必须是块级元素，且不浮动。对于内联元素，需要添加display：block；属性。

使用定位实现居中（需要计算偏移值）的方法要求必须知道要居中元素的宽高。而定位实现居中（不需计算偏移值，使用margin：auto；和四个方向定位搭配使用）的方法，则不需要知道元素的宽高，且具有较好的浏览器兼容性。

定位配合css3新属性transform：translate（x,y）使用，该方法同样不需要知道元素的宽度和高度，在移动端应用较多。

使用css3新属性calc()和定位配合使用（需要知道元素的宽高），以及使用jquery实现水平垂直居中，都是有效的实现方法。

使用弹性布局flex居中，不需要知道元素本身宽高以及元素的属性。使用display:table-cell;居中的方法，通过组合使用display:table-cell和vertical-align、text-align，可以使父元素内的所有行内元素水平垂直居中。

特别提醒，如有在学习上遇到疑问，可随时找我分享互联网web前端实战操作，无论是否有基础，我都欢迎。