DIV实现垂直居中的几种方法

Posted 2020-09-26 寻找薛定谔的猫

说道垂直居中，我们首先想到的是vertical-align属性，但是许多时候该属性并不起作用。例如，下面的样式并不能达到内容垂直居中显示

1  div {
2      width:200px;
3      height:300px;
4      border: 1px solid #000;
5      vertical-align: middle;
6  }

原来vertical-align属性仅能够作用于单元格或图像显示。因此要在上面样式内加入以下代码，才能够使文字或图像垂直居中：

1 display: table-cell;

但是IE浏览器并不能很好的支持display:table-cell，所以也就不能很好的支持vertical-align属性了。你可以使用以下方法巧妙地解决垂直居中：

1   div{
2     line-height: 300px;
3     width: 200px;
4     height: 300px;
5     border: 1px solid #000;
6   } 

通过定义单行文本的高度与行高相同，就能间接地实现文本垂直居中的问题。但是对于多行文本来说，这种方法就失效了。

下面说一下如何实现DIV在父元素中垂直居中

1、利用CSS3的transform属性对盒子进行移动实现，该样式定义在子元素上。代码如下：

 1  div{
 2     border:1px solid #000;
 3     width:300px;
 4     height: 200px;
 5     position: absolute;
 6     top:50%;
 7     left: 50%;
 8     z-index: 3;
 9     -webkit-transform:translate(-50%,-50%);
10  }

 

2、使用CSS3的flex布局实现，该样式定义在父元素上。代码如下：

1  .parent{
2     border:1px solid #000;
3     width: 800px;
4     height: 500px;
5     justify-content: center; /*子元素水平居中*/
6     align-items: center; /*子元素垂直居中*/
7     display: -webkit-flex;
8  }

1   <div class="parent">
2       <div style="width:100px;height: 100px;border:1px solid #ccc"></div>
3   </div>