元素垂直居中

方法一：运用flex布局实现

/*运用flex布局实现*/
.parent1{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500px;
	height: 500px;
	background: skyblue;
}
</style>
<div class="parent1">
      <div class="child">hello world-1</div>
  </div>

方法二：display: table

/*运用display: table实现*/
.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
</style>
<div class="parent1">
        <div class="child">hello world-1</div>
    </div>

方法三：利用css3和定位的方法

<style>
    
    .one {
position: relative;
width: 200px;
height: 200px;
background-color: rebeccapurple;
}

.two {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class="one">
<div class="two">wo</div>
</div>

参考链接：https://www.cnblogs.com/hutuzhu/p/4450850.html