CSS水平垂直居中对齐方法小结

单行文本元素垂直居中

单行文本若想在包裹它的标签内垂直居中，可使line-height的值与height的值相等

1
2
3
4
5
6
7
8
9
//css
.vertical {
  height: 100px;
  line-height: 100px;
  border: 1px solid black;
}

//html
<div class="vertical">content</div>

1

利用绝对定位设置垂直/水平居中

给容器设置绝对定位（position:absolute）,并且定位高度（top:50%）和margin-top为高度的一半（margin-top:-height/2）

1
2
3
4
5
6
7
8
9
10
11
//css
.vertical {
  height: 100px;//用此种方法进行居中的元素必须要有固定的高度
  position: absolute; 
  top: 50%;
  margin-top: -50px;
  border: 1px solid black;
}

//html
<div class="vertical">conteccccccccccccccccccccccccccccnt</div>

2

同理可用此方法设置水平居中