网页设计的垂直居中

推荐阅读原文

原文链接：网页设计的垂直居中

此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。

使用line-height做垂直居中

<p class="codepen" data-height="300" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="EMdevR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用line-height做垂直居中">
<span>See the Pen
使用line-height做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用line-height+inline-block做多行文字的垂直居中

<p class="codepen" data-height="300" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="oVaNra" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用CSS line-height + inline-block 做多行文字的垂直置中">
<span>See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用:before+inline-block做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="mozebx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用line-height+inline-block做多行文字的垂直居中">
<span>See the Pen
使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用padding做垂直居中

<p class="codepen" data-height="300" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="XGxPpV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用padding做垂直居中">
<span>See the Pen
使用padding做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用absolute+margin负值做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="OqBypd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用absolute+margin负值做垂直居中">
<span>See the Pen
使用absolute+margin负值做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用absolute+margin auto做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="NJOGeP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用absolute+margin auto做垂直居中">
<span>See the Pen
使用absolute+margin auto做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用absolute+translate做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="LagGPJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用absolute+translate做垂直居中">
<span>See the Pen
使用absolute+translate做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用relative+translateY做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="YgJOWB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用relative+translateY做垂直居中">
<span>See the Pen
使用relative+translateY做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用table做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="mozzJE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用table做垂直居中">
<span>See the Pen
使用table做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用display: table-cell做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="MxPERM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用display: table-cell做垂直居中">
<span>See the Pen
使用display: table-cell做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用flex+align-items做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="eXPZdX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用flex+align-items做垂直居中">
<span>See the Pen
使用flex+align-items做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用flex+:before+flex-grow做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="ZPqOxp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用flex+:before+flex-grow做垂直居中">
<span>See the Pen
使用flex+:before+flex-grow做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用flex+margin做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="RdeGdr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用flex+margin做垂直居中">
<span>See the Pen
使用flex+margin做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用Flex+align-self做垂直置中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="bZmBWL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用Flex+align-self做垂直置中">
<span>See the Pen
使用Flex+align-self做垂直置中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用flex+align-content做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="oVaewm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用flex+align-content做垂直居中">
<span>See the Pen
使用flex+align-content做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用grid+template做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="NJOvLp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用grid+template做垂直居中">
<span>See the Pen
使用grid+template做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用grid+align-items做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="KEGvJZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用grid+align-items做垂直居中">
<span>See the Pen
使用grid+align-items做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用grid+align-content做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="gEBxVw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用grid+align-content做垂直居中">
<span>See the Pen
使用grid+align-content做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用grid+align-self做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="VREMYL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用grid+align-self做垂直居中">
<span>See the Pen
使用grid+align-self做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用grid+place-items做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="PLyJmK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用grid+place-items做垂直居中">
<span>See the Pen
使用grid+place-items做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用grid+place-content做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="RdeLxp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用grid+place-content做垂直居中">
<span>See the Pen
使用grid+place-content做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用grid+margin做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="oVaGdL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用grid+margin做垂直居中">
<span>See the Pen
使用grid+margin做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用calc做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="pYxOJN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用calc做垂直居中">
<span>See the Pen
使用calc做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

使用writing-mode做垂直居中

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="WmagLj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用writing-mode做垂直居中">
<span>See the Pen
使用writing-mode做垂直居中 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

左图右文版面，文字做垂直居中

<p class="codepen" data-height="400" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="zbmMgd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="左图右文版面，文字做垂直居中-1">
<span>See the Pen
左图右文版面，文字做垂直居中-1 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="400" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="vPVvNb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="左图右文版面，文字做垂直居中-2">
<span>See the Pen
左图右文版面，文字做垂直居中-2 by whjin (@whjin)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>