垂直居中

行内块级元素

<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>