水平居中，垂直居中，水平垂直居中
水平居中
父元素添加text-align: center;子元素添加 display: inline-block;（文字也會(huì)居中）
<div class="parent">
<div class="child">
1
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: aqua;
text-align: center;
}
.child {
width: 200px;
height: 200px;
background-color: yellow;
display: inline-block;
}
父元素什么都不加；子元素添加 margin: 0 auto;（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
2
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: aqua;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: green;
margin: 0 auto;
/* text-align: center; */
}
父元素添加相對(duì)定位position: relative;子元素添加 絕對(duì)定位position: absolute;（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
3
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: aqua;
position: relative;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
left: 50%;
transform: translateX(-50%);
/* text-align: center; */
}
父元素添加display: flex;子元素不添加；（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
4
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
justify-content: center;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: wheat;
/* text-align: center; */
}
垂直居中
父元素添加display: table-cell;子元素不添加（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
1
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: darkcyan;
display: table-cell;
vertical-align: middle;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: aquamarine;
/* text-align: center; */
}
父元素添加相對(duì)定位position: relative;子元素添加 絕對(duì)定位position: absolute;（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
2
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: darkcyan;
position: relative;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: darkgreen;
position: absolute;
top: 50%;
transform: translateY(-50%);
/* text-align: center; */
}
父元素添加display: flex;子元素不添加；（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
3
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: darkcyan;
display: flex;
align-items: center;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: blueviolet;
/* text-align: center; */
}
水平垂直居中
父元素添加display: table-cell;子元素添加 display: inline-block;（文字也會(huì)居中）
<div class="parent">
<div class="child">
1
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: pink;
text-align: center;/*必須加，不加就成了垂直居中*/
display: table-cell;
vertical-align: middle;
}
.child {
width: 200px;
height: 200px;
background-color: indianred;
display: inline-block;
}
父元素添加相對(duì)定位position: relative;子元素添加 絕對(duì)定位position: absolute;（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
2
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: khaki;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* text-align: center; */
}
父元素添加相對(duì)定位position: relative;子元素添加 絕對(duì)定位position: absolute;（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
4
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/* text-align: center; */
}
父元素添加display: flex;子元素不添加；（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
3
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: lightgreen;
/* text-align: center; */
}
父元素添加display: flex;子元素添加margin: auto;（文字不會(huì)居中，若是文字也居中可以在父元素或者子元素添加一個(gè)text-align: center;）
<div class="parent">
<div class="child">
5
</div>
</div>
.parent {
width: 400px;
height: 400px;
background-color: pink;
display: flex;
/* text-align: center; */
}
.child {
width: 200px;
height: 200px;
background-color: green;
margin: auto;
/* text-align: center; */
}
