垂直居中
行內塊級元素
<div class="bg-orange h100px line100px">
<span>height: 100px; line-height: 100px</span>
</div>
行內塊級元素垂直居中
position定位
<div class="bg-pink h100px relative">
<div class="centerY">
<span>position: absolute; top: 50%; transform: translateY(-50%);</span>
</div>
</div>
position定位垂直居中
flex布局
<div class="bg-orange h100px flex">
<div class="margin-auto">
<span>flex + (margin: auto;)</span>
</div>
</div>
flex布局垂直居中
grid布局
<div class="bg-pink h100px grid">
<div class="align-center">
<span>grid + (align-self: center;)</span>
</div>
</div>
grid布局垂直居中
水平居中
text-align
<div class="bg-orange h100px line100px text-center">
<div>
<span>text-align: center;</span>
</div>
</div>
塊級元素水平居中margin-auto
<div class="bg-pink h100px line100px">
<div class="bg-white margin-0-auto w100px">width: 200px; margin: 0 auto;</div>
</div>
flex布局
// flex + (margin: auto)
<div class="bg-pink h100px flex">
<div class="margin-auto">
flex + (margin: auto;)
</div>
</div>
// flex + (justify-content: center;)
<div class="bg-pink h100px flex justify-center">
<div>
flex + (justify-content: center;)
</div>
</div>
grid布局
// grid + (margin: auto)
<div class="bg-orange h100px grid">
<div class="margin-auto">
grid + (margin: auto;)
</div>
</div>
// grid + (justify-content: center;)
<div class="bg-pink h100px grid justify-center">
<div>
flex + (justify-content: center;)
</div>
</div>
