CSS中水平居中的方法

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

  • css水平居中
  1. text-align:center

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

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

 
 
CSS中水平居中的方法_第1张图片
 
CSS中水平居中的方法_第2张图片

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

 
CSS中水平居中的方法_第3张图片

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

 
CSS中水平居中的方法_第4张图片

这样就变正常啦~

2. margin:0 auto;

margin: 0 auto;在本身元素上设置,可以实现块级元素水平居中。上面的例子中我们可以看到div1并没有相对页面水平居中,它是块级元素,所以我们只要把div1,div2都设置margin:0 auto;就会出现如下效果:
 
CSS中水平居中的方法_第5张图片
 
3. 利用绝对定位元素实现

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

 
CSS中水平居中的方法_第6张图片

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

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

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

 
CSS中水平居中的方法_第7张图片
 
CSS中水平居中的方法_第8张图片

转载于:https://www.cnblogs.com/aaaaniu/p/8280510.html

你可能感兴趣的:(CSS中水平居中的方法)