CSS实现水平垂直居中的八种方式

首先确定页面元素结构如下：

<div class="box">
   <div class="content"></div>
</div>

页面已知元素结构样式如下：

.box {
    width: 300px;
    height: 300px;
    background-color: gray;
 }
 .content {
    width: 100px;
    height: 100px;
    background-color: aquamarine
 }

1. 第一种设置父元素通过flex布局，并设置相关的属性值为center

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

2. 第二种设置父元素相对定位，子元素绝对定位

.box {
    position: relative;
 }
 .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
 }

3. 第三种设置子元素transform属性

.box {
    position: relative;
 }
 .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

4. 第四种table布局实现

.box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
 }
 .content {
    display: inline-block;
 }

5. 第五种父级display:flex，子级margin:auto

.box {
    display: flex;
 }
 .content {
    margin: auto;
 }

6. 第六种父级相对定位position:relative,子元素margin-top,margin-left 移动本身大小的一半

.box {
    position: relative;
 }
 .content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
 }

7. 第七种使用grid布局

.box {
   display: grid;
}
.content {
   /*设置单元格内容的垂直位置*/
   align-self: center;
   /*设置单元格内容的水平位置*/
   justify-self: center;
}

8. 第八种通过子元素margin边距实现

.box {
    position: relative;
 }
.content {
    position: absolute;
    margin: 100px;
}