網頁設計的垂直居中

時間 2019-11-06

標籤網頁設計垂直居中简体版

原文原文鏈接

使用`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/ass...;></script>github

使用`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/ass...;></script>async

使用`: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/ass...;></script>flex

使用`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/ass...;></script>spa

使用`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/ass...;></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/ass...;></script>code

使用`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/ass...;></script>blog

使用`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/ass...;></script>ip

使用`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/ass...;></script>get

使用`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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></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/ass...;></script>