Recommend reading the original text
Original link:Vertical Center of Web Page Design
This series is a vertical centering solution frequently used in web page design, which is summarized in detail through this article.
Useline-height
Center vertically
<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= “use line-height to center vertically” >
<span>See the Pen
使用line-height做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useline-height
+inline-block
Center multiline text vertically
<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= “use CSS line-height+inline-block to center multiline text vertically” >
<span>See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Use:before
+inline-block
Center vertically
<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= “use line-height+inline-block to vertically center multiline text” >
<span>See the Pen
使用line-height+inline-block做多行文字的垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usepadding
Center vertically
<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= “use padding to center vertically” >
<span>See the Pen
使用padding做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useabsolute
+margin
Negative values are vertically centered
<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= “use absolute+margin negative value for vertical center” >
<span>See the Pen
使用absolute+margin负值做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useabsolute
+margin auto
Center vertically
<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= “use absolute+margin auto to center vertically” >
<span>See the Pen
使用absolute+margin auto做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useabsolute
+translate
Center vertically
<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= “use absolute+translate to center vertically” >
<span>See the Pen
使用absolute+translate做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Userelative
+translateY
Center vertically
<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= “use relative+translateY for vertical center” >
<span>See the Pen
使用relative+translateY做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usetable
Center vertically
<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= “use table for vertical center” >
<span>See the Pen
使用table做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usedisplay: table-cell
Center vertically
<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= “use display: table-cell to center vertically” >
<span>See the Pen
使用display: table-cell做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useflex
+align-items
Center vertically
<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= “center vertically with flex+align-items” >
<span>See the Pen
使用flex+align-items做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useflex
+:before
+flex-grow
Center vertically
<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= “center vertically with flex+:before+flex-grow” >
<span>See the Pen
使用flex+:before+flex-grow做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useflex
+margin
Center vertically
<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= “center vertically with flex+margin” >
<span>See the Pen
使用flex+margin做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
UseFlex
+align-self
Center vertically
<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= “use Flex+align-self for vertical centering” >
<span>See the Pen
使用Flex+align-self做垂直置中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Useflex
+align-content
Center vertically
<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= “center vertically with flex+align-content” >
<span>See the Pen
使用flex+align-content做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usegrid
+template
Center vertically
<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= “center vertically using grid+template” >
<span>See the Pen
使用grid+template做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usegrid
+align-items
Center vertically
<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= “center vertically using grid+align-items” >
<span>See the Pen
使用grid+align-items做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usegrid
+align-content
Center vertically
<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= “center vertically with grid+align-content” >
<span>See the Pen
使用grid+align-content做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usegrid
+align-self
Center vertically
<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= “use grid+align-self to center vertically” >
<span>See the Pen
使用grid+align-self做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usegrid
+place-items
Center vertically
<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= “center vertically using grid+place-items” >
<span>See the Pen
使用grid+place-items做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usegrid
+place-content
Center vertically
<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= “center vertically with grid+place-content” >
<span>See the Pen
使用grid+place-content做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usegrid
+margin
Center vertically
<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= “use grid+margin for vertical center” >
<span>See the Pen
使用grid+margin做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usecalc
Center vertically
<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= “use calc to center vertically” >
<span>See the Pen
使用calc做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Usewriting-mode
Center vertically
<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= “use writing-mode to center vertically” >
<span>See the Pen
使用writing-mode做垂直居中by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Left right text layout, text vertically centered
<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= “left right text layout, text vertically centered -1” >
<span>See the Pen
左图右文版面,文字做垂直居中-1by whjin (@whjin)
onCodePen.</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= “left right text layout, text vertically centered -2” >
<span>See the Pen
左图右文版面,文字做垂直居中-2by whjin (@whjin)
onCodePen.</span>
</p>
<script async src=”https://static.codepen.io/ass …; ></script>