CSS垂直居中的8種方法

通過vertical-align:middle實現css垂直居中是最常使用的方法，但是有一點需要格外注意，vertical生效的前提是元素的display：inline-block。

在使用vertical-align：middle的時候需要乙個兄弟元素做參照物，讓它垂直於兄弟元素的中心點。vertical-align對齊的方法是尋找兄弟元素中最高的元素作為參考。

<

html
>
<
head
>
<
title
>demo
title
>
<
style 
type
="text/css"
media
="screen"
>
.parentbox
.parentbox .childbox
.parentbox .brotherbox
style
>
head
>
<
body
>
<
div 
class
="parentbox"
>
<
div 
class
="childbox"
>
子元素 
隨著越來越多瀏覽器相容css中的flexbox特性，所以現在通過「display:flex」實現css水平居中的方案也越來越受青睞。
通過display:flex實現css垂直居中的方法是給父元素display:flex;而子元素align-self:center;
這個跟css水平居中的原理是一樣的，只是在flex-direction上有所差別，乙個是row(預設值)，另外乙個是column。
具體方式是為父元素新增偽元素:before，使得子元素實現垂直居中。
給父元素display:table，子元素display：table-cell的方式實現css垂直居中。
建立乙個隱藏節點#hide，使得隱藏節點的height值為剩餘高度的一半即可。
這種方法也適用於css水平居中，原理一樣。
給子元素的position:relative，再通過translatey即可定位到垂直居中的位置。
設定子元素的line-height值等於父元素的height，這種方法適用於子元素為單行文字的情況。
CSS垂直居中的8種方法
通過verticle align middle實現css垂直居中。通過display flex實現css垂直居中。charset utf 8 examplestitle href lianxi2.css rel stylesheet fa.son style head class fa class ...
CSS垂直居中的8種方法
1 通過verticle align middle實現css垂直居中。通過vertical align middle實現css垂直居中是最常使用的方法，但是有一點需要格外注意，vertical生效的前提是元素的display inline block。2 通過display flex實現css垂直居...
CSS實現垂直居中的5種方法
原文出自 糖伴西紅柿 利用 css 來實現物件的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麼來建立乙個好的居中 使用 css 實現垂直居中並不容易。有些方法在一些瀏覽器中無效。下面我們看一下使物件垂直集中的5種不同方法，以及它們各自的優缺點。可以看看測...