網頁設計的垂直居中

摘要： 原文連結：網頁設計的垂直居中 使用line-height 做垂直居中 .content{ width: 400px; background: #ccc; line-height:100px; margin: auto; } 使用...

原文連結：網頁設計的垂直居中

使用line-height 做垂直居中

.content{
width: 400px;
background: #ccc;
line-height:100px;
margin: auto;
}

使用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
by whjin (@whjin )

onCodePen .</span>

</p>

<script async src="https://static.codepen.io/ass... ;></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
by whjin (@whjin )

onCodePen .</span>

</p>

<script async src="https://static.codepen.io/ass... ;></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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</span>

</p>

<script async src="https://static.codepen.io/ass... ;></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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</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
by whjin (@whjin )

onCodePen .</span>

</p>

<script async src="https://static.codepen.io/ass... ;></script>