垂直居中的几种方法

发表于 | 分类于 | 阅读

line-height的值和height一致

只对文本有效（块级元素无效），文本会默认在自己行高内垂直居中。

  • 范例如下图：

文本垂直居中

  • 代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
     .first{
      background-color: pink;
      height：60px;
      line-height:60px;
      }
    </style>
    <div class="first">
      <p>文本垂直居中</p>
    </div>

绝对定位垂直居中

有固定宽度和高度,position:absolute，父元素设为相对定位，left和top偏移50%，负margin自身宽度和高度的一半，为具体数值

固定宽度和高度

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="ct">
   <div class="box"></div>
</div>
<style>
 .ct{
   width: 300px;
   height: 300px;
   background-color: pink;
   position:relative;
   }
 .ct .box{
   width: 100px;
   height: 100px;
   display: inline-block;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-50px;
   margin-top:-50px;
   background-color: #ccc;
   }
</style>

有固定宽度和高度的块元素，设置top:0; bottom:0; left:0; right:0; margin:auto;

top:0; bottom:0; left:0; right:0; margin:auto;

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="ct">
   <div class="box"> </div>
</div>
<style>
  .ct{
    width: 300px;
    height: 300px;
    background-color: pink;
    position:relative;
  }
  .ct .box{
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin:auto;
    background-color: #ccc;
    }
  </style>

没有固定宽度和高度,position:absolute，父元素设为相对定位，left和top偏移50%，负margin自身宽度和高度的50%(不兼容ie8)

没有固定宽度和高度

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="ct">
   <div class="box">
    未必会来，未必会走。早应该懂得，这世界没什么不朽。时间是条狗，拼命啃噬它的肉骨头。再多挑逗，也不会回头。未必会来，未必会走。命运是量身定做，也难免出错。应该想通，谁最后不是两手空空。
   </div>
</div>
<style>
 .ct{
   width: 300px;
   height: 300px;
   background-color: pink;
   position:relative;
 }
 .ct .box{
   width: 50%;
   display: inline-block;
   position:absolute;
   left:50%;
   top:50%;
   transform:translate(-50%,-50%);
   background-color: #ccc;
   }
 </style>

display：table-cell垂直居中(兼容ie8)

把元素的显示方式设置为表格table-cell，我们可以使用表格的 vertical-align属性middle来设置垂直居中(如果子元素不是img元素，可以把子元素设置为display：inline-block就可以水平居中)

table-cell

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ct">
  <img src="http://p4.music.126.net/Tfiad_1N1ko6iI-q1D_ZiA==/737772302281979.jpg?param=130y130" alt="">
</div>
<style>
.ct{
  width: 300px;
  height: 300px;
  background-color: pink;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  }
</style>

vertical-align:midlle垂直居中

vertical-align实现居中的元素必须是行内元素或者行内块元素，此方法是给元素添加一个行内块元素的伪类，高度设为父元素的宽度，和元素一起设为vertical-align为middle

vertical-align

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="ct">
   <img src="http://p4.music.126.net/Tfiad_1N1ko6iI-q1D_ZiA==/737772302281979.jpg?param=130y130" alt="">
</div>
<style>
  .ct{
    width: 300px;
    height: 300px;
    background-color: pink;
    text-align: center;
    }
  .ct:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }
  img{
    width: 100px;
    vertical-align: middle;
    }
</style>

flex垂直居中

不兼容ie8的一种方法，但却是最简便的方法，也是日后越来越普遍的一种解决方案

flex水平垂直居中

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  .ct{
    width: 300px;
    height: 300px;
    background-color: pink;
    display: flex;
    align-items: center;    /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    }
  .box{
    width: 100px;
    height: 100px;
    background-color: #555;
    }
</style>
<body>
  <div class="ct">
    <div class="box"></div>
  </div>
</body>
0%