css常见居中方法

在css布局中，居中占着很关键的作用，如果不能很好的运用居中，就会导致整个页面的混乱。

在实际页面布局中，居中的方法有很多，有很多简单实用的方法，也有老实的方法。刚开始写页面的时候，我比较喜欢用老实的方法去写，因为不会错，但我们也应该掌握常见的居中方法.

常见居中方法：

text-align:center

在父容器里水平居中 inline文字，或inline元素。

vertical-ailgn:middle

垂直居中 inline文字，inline元素，配合display：table，display：table-cell，有奇效。

line-height

与height联手，垂直居中文字。

margin:auto

与width联手，水平居中。

hacks,hacks(小技巧)

有许多hacks，负margin，影子元素：：before等，如果你的内容不是很固定的花，他们大部分是很脆弱的。

translate(-50%,-50%)

用position 加translate translate(-50%,-50%)比较奇特，百分比计算不以父元素为基准，而是以自己为基准。

绝对定位居中

注意：高度必须定义，建议加overflow:auto,防止内容溢出。

视口居中

内容元素：positioon: fixed, z-index:999，记住父容器元素position:relative.

负margin

确切知道宽高，负margin是宽和高的一半。