css垂直居中的幾種方法

1.lineheight方法

html

class="container"

id="div1">
src="test.png">
一行文字span>
div>css
.container
#div1
#div1
img

說明 設定了lineheight和容器高度相同，vertical-align: middle

需要知道容器的高度

2.table布局方法

html

class="container"

id="div2">
src="test.png">
div>
一行文字span>
div>
div>css
#div2
#div2
div

說明 這種方法不需要知道容器和子元素的高度

注意我在inline元素外面套了一層div

3.絕對定位和負邊距方法

html

class="container"

id="div3">
src="test.png">
一行文字span>
div>css
#div3
#div3
img

說明 我只定位了，水平和垂直都居中了，

這種方法需要知道子元素的寬高。

4.絕對定位和auto邊距方法

html

class="container"

id="div4">
src="test.png">
一行文字span>
div>css
#div4
#div4
img

說明 這個也是只定位了，

這個方法不需要知道容器和子元素的高度。

5.上下相同內邊距方法

html

class="container"

id="div5">
一行文字p>
一行文字p>
div>
div>css
#div5
#div5
div

說明 這裡我只放了文字，去掉了容器固定高度。

這種方法比較直接，只是增加了上下padding，看上去是居中。

6.float方法

html

class="container"

id="div6">

id="floater">div>

div>

css

#floater

#div6
img

說明 這裡只定位了

這種方法通過插入了乙個float元素，來定位到居中位置，需要知道子元素的高度。

7.flexbox方法

html

class="container"

id="div7">
src="test.png">
一行文字span>
div>css
#div7

class="container"

id="div8">
src="test.png">
一行文字span>
div>css
#div8
#div8
img#div8
span

說明 這個方法也不錯，不過還是相容性問題。

總結

1.這些例子我都是在chrome裡跑的，相容寫法自己研究吧

2.在垂直居中的時候，先看容器和子元素的高度是否固定，來選擇方法

CSS垂直居中的幾種方法

對於乙個前端開發人員，元素居中在布局中相當常見，水平居中實現非常非常容易，如果是行內元素，設定text align center就行，如果是塊級元素，通過設定邊距margin auto可實現水平居中。垂直居中實現起來相對較為較為麻煩，不囉嗦，直接上乾貨。主要有下面幾種方法 1 絕對定位方法 id m...

css 垂直居中的幾種方法

1.水平垂直居中 html css parent parent child parent child img 注 ie修復 display inline block 由於vertical align屬性與 一起使用，我們將父div設定為display table,並將子div設定為單元格displa...

CSS水平垂直居中的幾種方法

直接進入主題！css div imghtml 效果圖 當乙個元素絕對定位時，它會根據第乙個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。css container inner html 效果圖 這裡，我們首先用top 50 和left 50 讓inner的座標原點 左上角 ...