网页设计的垂直居中

共计 6591 个字符，预计需要花费 17 分钟才能阅读完成。

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

使用 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 使用 CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin) on CodePen.</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 使用 line-height+inline-block 做多行文字的垂直居中 by whjin (@whjin) on CodePen.</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 使用 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>
使用 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>
使用 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>