CSS中水平居中的方法

居中是我们在css中经常遇到的问题，一般有水平居中、垂直居中、垂直水平居中这3种情况，那么今天首先就来对学习到的水平居中的方法做个总结笔记。

• css水平居中

1. text-align:center

它的效果为： 将父元素设置了text-align：center之后，子元素中的文本会表现为水平居中；

为了看得更清楚，我们举一个例子，如图，我们将div2放入div1中，现在，如果我们想让文字在div2中水平居中，那么将它的父元素div2或者（div1）设置为text-align:center即可。因为子元素会继承text-align这个属性。

 

 

那么接下来，如果我们想让div2也相对于div1水平居中，应该怎么办呢？既然居中效果只对文本内容和行内元素有效，那我们将div2设置为display：inline-block；我们再来看看效果：

 

我们看到div2与里面的文字都水平居中了，但是我们发现这一段文字水平居中之后很难看，我们只想让div2水平居中，这也就是这种方法的不足之处，子元素的text-align继承了父元素的center，文字也居中显示，所以我们需要在子元素中设置text-align：left；

 

这样就变正常啦~

2. margin：0 auto；

margin: 0 auto；在本身元素上设置，可以实现块级元素水平居中。上面的例子中我们可以看到div1并没有相对页面水平居中，它是块级元素，所以我们只要把div1，div2都设置margin：0 auto；就会出现如下效果：

 

 

3. 利用绝对定位元素实现

（1）子绝父相水平居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值，margin为auto的前提下，只要 left 和 right 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现水平居中了。

 

（2）利用margin负值：将div设置为绝对定位，父元素为相对定位，然后将div的left和top属性值分别设置为50%，但是这个时候只会让div的左上角居中，然后在将margin-left和margin-top属性值分别设置为负数，并且值为div的宽和高的一半，这样就是先了div的中心点居中，但如果它没有父元素，或者父元素中没有采用绝对定位或者相对定位的，那么就以窗口为定位参考对象，也就是整个div相对窗口居中了。

效果看下面两张图，图一中div1设置了相对定位，div2为绝对定位，所以div2在div1中水平居中。

图二中div1设置了无定位，div2为绝对定位，所以div2相对于视窗居中。