編輯于: 2018-05-21

前提：

html模板：

<div class="parent"><div class="content">內容垂直居中</div></div> 復制代碼

聲明：以下示例，主要實現垂直居中的樣式代碼為加粗的部分

一、對單行元素進行垂直居中時

可設置該行內元素的父元素的height與line-heigth的值相等，讓行內元素垂直居中

針對行內元素，可通過設置vertical-align: middle;以及line-height進行垂直居中

二、對文本進行垂直居中

針對文本，通過display:flex;配合align-items和justify-content實現文本居中

.content{display: flex;align-items: center;justify-content: center;} 復制代碼

三、對已知高度塊級元素進行垂直居中

絕對定位，配合top:50%和負margin-top(元素高度一半)進行垂直居中

.content{position: absolute;top: 50%;left: 50%;margin-top: -10em; /* 為元素height/2 */margin-left: -10em;width: 20em;height: 20em;background-color: aqua;} 復制代碼

絕對定位，配合top:0;bottom:0;和margin:auto進行垂直居中

.content{position: absolute;margin：auto；top: 0;bottom: 0;left: 0;right: 0;height: 200px; /*要求指明元素高度*/background-color: aqua;} 復制代碼

設置position:absolute;和calc()函數實現垂直居中

.content{position: absolute;top:calc(50% - 10em); /*calc(50% - 元素本身高度一半)*/left: calc(50% - 20em); /*注意使用時減號間有空格*/width: 40em;height: 20em;background-color: aqua;} 復制代碼

使用浮動float實現元素垂直居中

原理：通過在要進行垂直居中的元素a前面添加一個無內容的元素，并將該無內容元素的高設置為50%，在利用clear:botn清除浮動，則元素a相對于父元素來說是垂直居中。

html如下：

<div class="parent"><div class="float"></div><div class="content"><div><span>內容垂直居中內容垂直居中內容容垂居中</span></div></div></div> 復制代碼

css如下：

.parent{height: 500px;background-color: red;} /**添加的輔助元素*/ .float{height: 50%;}.content{clear: both;background-color: aqua;} 復制代碼

四、對未知高度塊級元素進行垂直居中

設置position：absolute；和transform:traslate(x,y)實現水平垂直居中

.content{position: absolute;margin：auto；top: 50%;left: 50%;transform:translate(-50%,-50%); /*針對元素本身向左以及向上移動50%*/background-color: aqua;} 復制代碼

居于視口單位的解決方案：

可通過使用margin-top: 50vh;配合transform:translateY(-50%);實現視口居中

.content{width: 18em;margin-top: 50vh; /*50vh表示視口高度的50%*/transform: translateY(-50%); /*相對元素自身向上移動50%*/background-color: aqua;} 復制代碼

通過display:table-cell和vertical-align:middle;實現垂直居中

.parent{display: table;width: 50px; /*建議設置寬高，以便于查看效果*/height: 500px;}.content{display: table-cell;vertical-align: middle;background-color: aqua;} 復制代碼

基于flex的解決方案：

.parent{display: flex;background-color: beige;}.content{margin: auto; /*自動相對于父元素水平垂直居中*/background-color: aqua;} 復制代碼

轉載于:https://juejin.im/post/5c778728f265da2d87638711

總結

以上是生活随笔為你收集整理的css实现垂直居中的几种方式（布局常用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。