CSS实现水平垂直居中的方式有哪些？

CSS实现水平垂直居中的方式有哪些？

基本结构样式：

.box {
width: 400px;
height: 400px;
background-color: red;
}

.inner {
width: 100px;
height: 100px;
background-color: blue;
}

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

1.利用flex布局

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

添加样式：

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

2.利用flex+margin

display: flex;

margin: auto;

添加样式：

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

3.利用定位，子绝父相

3.1.利用margin: auto（偏移量都为0）

添加样式：

.box { position: relative; }

.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

3.2.利用平移translate

添加样式：

.box { position: relative; }

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

4.知道具体宽高，通过计算

4.1.子绝父相，直接计算或者使用calc()

添加样式：

.box { position: relative; }

.inner {
position: absolute;
/* 直接计算 */
/* top: 150px;
left: 150px; */
top: calc(50% - 50px);/* 使用calc() */
left: calc(50% - 50px);
}

4.2.利用margin

margin-top

overflow: hidden;

添加样式：

.box { overflow: hidden; }

.inner {
margin: 0 auto;
margin-top: 150px;
}

4.3.利用padding

box-sizing: border-box;

添加样式：

.box {
box-sizing: border-box;
padding: 150px;
}

5.利用display的table-cell属性值

5.1.利用display+vertical-align

display: table-cell;

vertical-align: middle;

margin: 0 auto;

添加样式：

.box {
display: table-cell;
vertical-align: middle;
}

.inner { margin: 0 auto; }

5.2.利用display+vertical-align+text-align

display: table-cell

添加样式：

.box {
display: table-cell; /* 此元素会作为一个表格单元格显示 */
vertical-align: middle; /* 把此元素放置在父元素的中部 */
text-align: center;
}

.inner { display: inline-block; }

6.以上方法最终运行结果