CSS中的垂直居中的几种方法

2017-05-12 本文已影响0人 8d2855a6c5d0

1、利用padding实现内容垂直居中

.wrap {
  margin: 50px auto;
  background-color: #ccc;
  padding: 30px;
  text-align: center;
}

2、绝对定位

在块元素上添加绝对定位属性和负margin,如果不是块元素可以转换成inline-block。
如果是未知元素大小的情况可以采用transform:translate(-50%,-50%);来处理，但是transform兼容性需要考虑

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vertical align</title>
</head>
  <style>
.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  position:relative;
}

a{
  display:inline-block;
  position:absolute;
  left:50%;
  top:50%;
  width:100px;
  height:30px;
  margin-left: -50px;
  margin-top: -15px;
}
</style>
<body>
  <div class="box">
    <a href="">我是文字</a>
  </div>
</body>
</html>

3、使用vertical-align:middle

使用vertical-align:middle;有两种情况：
第一种情况是在父元素上配合table-cell使用，父元素内的所有元素都会整体垂直居中，无论子元素是block元素，还是inline元素。同时配合 text-align: center;inline和inline-block元素还可实现水平居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.box div{
  /* display:inline-block; */
  width:250px;
  height:40px;
  border:1px solid ;
  line-height:40px;
}
  </style>
<body>
  <div class="box">
    <div>我是块元素我不受text-align控制</div>
    <a href="#">我是行内元素</a>
  </div>
</body>
</html>

第二种情况是，子元素之间的垂直居中对齐。如果只有一个对象，想让它在父元素中对齐，可以添加一个空的比较对象

father:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

如果有多个对象，可以给它们都添加vertical-align:middle,从而实现子元素之间的垂直对齐。

4、利用行高实现

元素的高度和行高相等实现居中，一般用于文字。

.demo {
      width: 100px;
      height: 100px;
      line-height: 100px;
      color: red;
}

5、flex实现

.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}