垂直居中

自己整理一下收集到的垂直居中的方式：

table自带居中功能

<table>
	<tr>
		<td>
			<div>表格垂直居中</div>
		</td>
	</tr>
</table>

<div class="like-table">
	<div>假的表格垂直居中</div>
</div>

.like-table{
    display:table-cell;
}

设定行高

适用于「单行」的「行内元素」 ( inline、inline-block )，将line-height设成和高度一样的数值，则内容的行内元素就会被垂直置中。

设定伪类元素

使用伪元素的方式。 在此之前，先解释一下 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 这个属性是加在容器内部较高的元素上, 使其基线相对保持在较高元素中间, 因此，如果有一个方块变成了高度100%，那么其他的方块就会真正的垂直居中。所以使用伪类的方式，

<div class="parent">
  <div class="child">
  	一串文字
  </div>
</div>

.parent{
  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;
}

margin: auto

<div class="parent">
  <div class="child">
  	一串文字
  </div>
</div>
.parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

margin-top:-50%

<div class="parent">
  <div class="child">
  	一串文字
  </div>
</div>
.parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

transform

.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;
}

flex布局

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}

grid布局

.parent{
  display:grid;
  justify-content:center;
  align-content:center;
}