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是宽和高的一半。

原文地址:https://www.cnblogs.com/rwalker/p/5402337.html