在我们日常开发的时候，经常会使用到css 的居中布局，不论是移动端还是我们的pc端，今天总结归纳几种css居中布局的方法，代码可以自己修改 ，为了演示，所以自己加 了宽高，有错误欢迎大家指正。
1： 水平居中方法 ：
主要知识点：父级元素parent设置 text-align: center;
子元素child设置 display: inline-block;
shuip.png
css代码一
.parent{
text-align: center;
width: 500px;
height: 500px;
margin: 10px auto;
background: #ccc;
}
.parent .child{
display: inline-block;
padding: 10px;
background: pink;
}
css代码二：
.parent{
background: #ccc;
width: 600px;
height: 600px;
margin: 20px auto;
position: relative;
}
.parent .child{
position: absolute;
left: 50%;
background: pink;
padding: 10px;
transform:translateX(-50%);
}
html代码：
<div class="parent">
<div class="child">
我是垂直居中显示
</div>
</div>
2:垂直居中方法：
如图：
2.png
css代码一:
.parent{
display: table-cell;
vertical-align: middle;
width: 500px;
height: 600px;
background: #ccc;
}
.parent .child{
background: pink;
padding: 10px;
width: 100px;
}
html代码：
<div class="parent">
<div class="child">
我是垂直居中显示
</div>
</div>
3:垂直水平都居中：
如图：
5.png
css代码一：
.parent{
text-align: center;
background: #ccc;
height: 600px;
width: 600px;
display: table-cell;
vertical-align: middle;
}
.parent .child{
display: inline-block;
background: pink;
padding: 10px;
width: 150px;
height: 150px;
}
css代码二：
.parent{
background: #ccc;
height:400px;
width: 400px;
position: relative;
}
.child{
background: pink;
padding: 10px;
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
css代码最终版本
.parent{
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
height:600px;
width: 400px；
}
.child{
background: pink;
padding: 10px;
width: 150px;
height: 150px;
}
html代码
<div class="parent">
<div class="child">
我是垂直居中和水平居中显示
父级大小，子集大小 ，不固定可以随意更改大小
</div>
</div>
