在寫頁面的時候，經常會遇到元素垂直居中的需求。有時候一連試了幾種方法，并沒有效果，那是因為你沒有用對方法，每種垂直居中，都有不同的使用條件。下面我們來詳細了解一下吧。

這裡收集了八種不同的方法。

适用場景：單行文字垂直居中。

在一個塊級元素中有一行字，想讓文字垂直居中，便可以在塊級元素上設置和元素高度一緻的行高。如圖所示<div>元素，添加行高後，文字的位置就從左邊變成右邊的，實現了垂直居中。

html

<div id="div"> 你好 </div>

css

#div{ height:50px; line-height:50px; }

适用場景：圖片垂直居中。

<div id="div"> <img src="image.png" id="img" /> </div>

給父元素添加line-height,給圖片元素加上vertical-align: middle。

#div { line-height: 200px; } #img { vertical-align: middle; }

适用場景：居中元素能被撐開有高度即可使用。

html

<div id="div"> <div id="block">content</div> </div>

css

#div { position:relative; } #block { positopn:absolute; top:50%; transform: translateY(-50%) }

适用場景：多行文字垂直居中，或者将塊元素轉成行内元素也可使用。

vertical-align 隻對 table-cell 以及 inline-element 起作用，vertical-align 的值是相對于其父元素的，父元素必須是行内元素。如果想用于塊元素，我們可以将父元素轉化為table，這樣就能使用此方法。

多行文字居中

// html <div id="div"> <span id="content">那是因為你沒有用對方法，每種垂直居中，都有不同的使用條件。下面我們來詳細了解一下吧。</span> </div> // css #div{ display: table; } #span { display: table-cell; vertical-align: middle; }

塊元素居中

#div { display: table; } #block { display: table-cell; vertical-align: middle; }

适用場景：這種方法适用于塊級元素，需要設置元素的高度。也就是設置子元素距離父元素頂部50%，然後通過margin把子元素向上移動自身高度的一半。

html

<div id="div"> <div id="block">content</div> </div>

css

#div { position:relative; } #block { positopn:absolute; top: 50%; left: 50%; height: 30%; width: 40%; margin: -15% 0 0 -20%; }

适用場景：都可以使用。

html

<div id="div"> <div id="block">content</div> </div>

css有兩種寫法：

// 方法一： #div { display:flex; align-item:column; } // 方法二： #div { display:flex; flex-direction:column; // 改變主軸方向 justify-content:center; // 定義主軸的對齊方式 }

适用場景：塊級元素垂直居中。

把要垂直居中的元素相對于父元素絕對定位，top和bottom設置為相等的值，我這裡設置成0了。再将要居中的元素的margin設為auto，這樣就可以實現垂直居中了。

html

<div id="div"> <div id="block">content</div> </div>

css

#div { position:relative; } #block { positopn:absolute; top:0; bottom:0; margin:auto 0; }

适用場景：須知父元素的高度和子元素的高度。如果指定父元素高度為300px，子元素高度為100px，要實現垂直居中需要設置父元素的上下padding為100px。

html

<div id="div"> <div id="block">content</div> </div>

css

#div { padding: 100px 0; }

喜歡的話，歡迎點贊收藏！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!