css实现水平居中、水平垂直居中

一、水平居中

html代码，只有父元素和子元素

<div class="parent">
    <div class="son"></div>
</div>

• 第一种方法是在子元素的样式中添加margin: 0 auto;
• 第二种方法用定位
  父元素相对定位position: relative;
  子元素绝对定位

position: absolute;
top: 0;
left: 50%;
margin-left: -50px;

• 第三种方法flex布局
  给父元素添加

display: flex;
justify-content: center;

二、水平垂直居中

• 利用定位
  父元素相对定位position: relative;
  子元素绝对定位

position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;

• 利用flex布局 给父元素添加

display: flex;
justify-content: center;
align-items: center;