1.水平对齐+行高
【方式1】text-align + line-height实现单行文本水平垂直居中
<style>
.f1 .test {
text-align: center;
line-height: 100px;
}
</style>
<!--1.水平对齐+行高-->
<div class="case-box f1">
<div class="test" style="background-color: lightblue;width: 200px;">水平对齐+行高</div>
</div>
效果1:
2.水平+垂直对齐
【方式2】text-align + vertical-align
【1】在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素
<style>
.f2 .parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.f2 .child {
width: 80px;
display: inline-block;
}
</style>
<div class="case-box f2">
<div class="parent" style="background-color: gray; width:200px; height:100px;">
<div class="child" style="background-color: lightblue;">水平+垂直对齐</div>
</div>
</div>
效果2(1):
【2】若子元素是图像,可不使用table-cell,而是其父元素用行高替代高度,且字体大小设为0。子元素本身设置vertical-align:middle
<style>
.f3 .parent {
line-height: 200px;
text-align: center;
font-size: 0;
}
.f3 .child {
vertical-align: middle;
}
</style>
<div class="case-box f3">
<div class="parent" style="background-color: gray; width:200px;">
<img class="child" src="https://img2.baidu.com/it/u=4126704565,802907532&fm=26&fmt=auto" style="width:50px;"
alt="test">
</div>
</div>
效果2(2):
3.margin + vertical-align
【方式3】text-align + vertical-align
<style>
.f13 .parent {
display: table-cell;
vertical-align: middle;
}
.f13 .child {
display: table;
margin: 0 auto;
}
</style>
<div class="case-box f13" data-case="f13">
<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<div class="child" style="background-color: lightblue;">margin + vertical-align</div>
</div>
</div>
效果3:
4.绝对定位
【方式4】(1)绝对定位+margin: auto;(2)绝对定位+平移
(1)利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin:auto
<style>
.f14 .parent {
position: relative;
}
.f14 .child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 160px;
margin: auto;
}
</style>
<div class="case-box f14" data-case="f14">
<div class="parent" style="background-color: lightgray; width:400px; height:300px; ">
<div class="child" style="background-color: lightblue;">绝对定位+margin: auto;</div>
</div>
</div>
效果4(1)
(2)利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果
<style>
.f15 .parent {
position: relative;
}
.f15 .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="case-box f15" data-case="f15">
<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<div class="child" style="background-color: lightblue;">绝对定位+平移</div>
</div>
</div>
效果4(2)
5.display: flex;
【方式5】(1)在伸缩项目上使用margin:auto(2)在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
(1)在伸缩项目上使用margin:auto
<style>
.f16 .parent {
display: flex;
}
.f16 .child {
margin: auto;
}
</style>
<div class="case-box f16" data-case="f16">
<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<div class="child" style="background-color: lightblue;">flex+margin: auto;</div>
</div>
</div>
效果5(1):
(2)在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
<style>
.f17 .parent {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="case-box f17" data-case="f17">
<div class="parent" style="background-color: lightgray; width:400px; height:200px; ">
<div class="child" style="background-color: lightblue;">flex+justify-content+align-items</div>
</div>
</div>
效果5(2):
6.grid
【方式6】(1)在网格项目中设置justify-self、align-self或者margin: auto(2)在网格容器上设置justify-items、align-items或justify-content、align-content
(1)在网格项目中设置justify-self、align-self或者margin: auto
<style>
.f18 .parent {
display: grid;
}
.f18 .child {
align-self: center;
justify-self: center;
}
</style>
<div class="case-box f18" data-case="f18">
<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<div class="child" style="background-color: lightblue;">grid+align-self+justify-self</div>
</div>
</div>
效果6(1)
(2)在网格容器上设置justify-items、align-items或justify-content、align-content
<style>
.f19 .parent {
display: grid;
align-content: center;
justify-content: center;
}
</style>
<div class="case-box f19" data-case="f19">
<div class="parent" style="background-color: lightgray; width:400px; height:200px; ">
<div class="child" style="background-color: lightblue;">grid+align-content+justify-content</div>
</div>
</div>
效果6(2)