让我们来看看如何实现「垂直居中」？

大家好，我是hone,今天特地的去了解了一下如何实现垂直居中，于是便记个笔记防止自己忘记。（其实一开始还是不能理解记那么多干嘛=-=）

1.使用 margin-top: -50%

html部分我就不展示了，直接上CSS代码

.parent
{
  height: 600px;
  border: 1px solid red;
  position: relative;
}

.child
{
  border: 1px solid green;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  height: 100px;
  margin-top: -50px;
}

2. transform: translate(-50%,-50%)

.parent
{
  height: 600px;
  border: 1px solid red;
  position: relative;
}

.child
{
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

3.使用 absolute margin auto

.parent
{
  height: 600px;
  border: 1px solid red;
  position: relative;
}

.child
{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

4. flex布局

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

.child
{
  border: 3px solid green;
  width: 300px;
}

5. 使用Grid布局

<div class="parent">
    <div class="child"></div>
    <div class="child-center"></div>
    <div class="child"></div>
</div>

.parent
{
  width: 400px;
  height: 300px;
  display: grid;
}

.child
{
  background: #bd1000;
}

.child-center
{
  background: #ddd;
}

6. 使用 line-height = height

.box
{
  width: 400px; 
  height: 300px; 
  background: #ddd; 
  line-height: 300px;
}

7. 使用 padding

.parent 
{
  width: 400px;
  background: #bd1000;
  padding: 100px 0;
} 

.child 
{
  height: 100px;
  background: #ddd;
}

8. table自带功能

<table class="parent">
  <tr>
    <td class="child">
      时间就是有这样的魔力，你将它专注于一件事上，它反馈给你的远不止是从0到1的质变，更可能是质变的N次方。
    </td>
  </tr>
</table>

9. 100% 高度的 after before 加上 inline block

  <div class="parent">
    <div class="child">
      时间就是有这样的魔力，你将它专注于一件事上，它反馈给你的远不止是从0到1的质变，更可能是质变的N次方。
    </div>
  </div>

.parent
{
  border: 3px solid red;
  height: 600px;
  text-align: center;
}

.child
{
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent:before
{
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.parent:after
{
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

10. div 装成 table

  <div class="table">
      <div class="td">
        <div class="child">
          时间就是有这样的魔力，你将它专注于一件事上，它反馈给你的远不止是从0到1的质变，更可能是质变的N次方。
        </div>
    </div>
  </div>

div.table
{
  display: table;
  border: 1px solid red;
  height: 600px;
}

div.td
{
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child
{
  border: 10px solid black;
}

为啥有的不上图啊？
那当然是有的脑子一想就知道了=-=
那有的想不到呢？
敲一遍，多敲自然就知道了\