一、水平居中
1. inline-block + text-align
text-align（他会有继承） 作用在块级元素上，会让块级元素的inline-block子级 ，进行排列
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
width: 200px;
text-align: center;
}
.child{
display: inline-block;
}
2. table + margin
table如果不给它的所在元素设置宽的话，他的宽会是由内容撑开
<div class="parent">
<div class="child">demo</div>
</div>
.child{
display: table;
margin: 0 auto;
}
3.absolute + transform
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
transform: translateX(-50%);
}
4.flex + justify content
flex的属性值其实也可以支持margin:0 auto;
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
display: flex;
justify-content: center;
}
或
.parent{
display: flex;
}
.child{
border: 1px solid green;
margin: 0 auto;
}
二、父元素和子元素都不定高，实现垂直居中
1.tale-cell + vertical-align
tale-cell 单元格这样的属性值，会自动让他的子元素居中
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
display: table-cell;
vertical-align: middle;
}
2.absolute + transform
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
position: relative;
}
.child{
position: absolute;
top:50%;
transform: translateY(-50%);
}
3.flex + align-items
align-items他的默认值是拉伸，布满整个容器
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
display: flex;
align-items: center;
}
三、容器大小不固定，同时居中
效果图.png
1.inline-block + text-align + tale-cell + vertical-align
tale-cell 单元格这样的属性值，会自动让他的子元素居中
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}
2.absolute + transform
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
position: relative;
}
.child{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
3.flex + judifycontent + align-items
align-items他的默认值是 stretch拉伸，布满整个容器
<div class="parent">
<div class="child">demo</div>
</div>
.parent{
display: flex;
justify-content: center;
align-items: center;
}