CSS垂直居中，你會多少種寫法？

caohaoyu 發布于2019-08-29 18:43 / 1061人閱讀

摘要：如果我們直接可以計算出正確的和值，豈不是一次到位函數正有此功能，當然我們需要知道子元素的寬高效果是一個作用于內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是默認情況下是與父元素基線對齊的。

??CSS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。
??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文檔流是水平方向的，所以水平方向上的布局控制比垂直方向要簡單很多，居中也是如此。不過（水平）垂直居中還是有很多種寫法，至少一只手是數不過來了，本文列出幾種，并進行簡單比較。

一、水平居中

??使用CSS控制水平居中很簡單：

塊級元素設置width,并設置margin auto

內聯元素父元素設置text-align center

HTML代碼如下:


  
    水平居中哦

1. 塊級元素水平居中

.container {
  height: 300px;
  width: 300px;
  border: 1px solid red;
}

.content {
  width: 10rem;
  border: 1px solid green;
  margin: 0 auto;
}

效果：

2. 內聯元素水平居中

.container {
  height: 300px;
  width: 300px;
  border: 1px solid red;
  text-align: center;
}

.content {
  display: inline-block;
  border: 1px solid green;
}

效果：

代碼很簡單，而且沒什么兼容性問題，所以通常也不需要用別的復雜方式來實現水平居中效果。

二、水平垂直居中

??使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那么方便，這里主要羅列幾種。

1. flex布局

flex布局出現以后，垂直居中就很方便了，直接設置父元素：

display flex
align-items center

如果同時要水平居中，則同時設置：

justify-content center

需要注意的是IE10+才支持，webkit前綴瀏覽器設置flex屬性需要加webkit。

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: -webkit-flex;
  display: flex; // 關鍵屬性
  align-items: center;　// 垂直居中
  justify-content: center // 水平居中
}

.content {
  border: 1px solid green;
}

2. margin+ position:absolute布局

??position: absolute布局的元素，通過設置top/bottom, left/right這兩對屬性，可以讓元素在垂直方向和水平方向分別具有了自適應的特性。就像div在水平方向的默認表現一樣!
上文中對于塊級元素的水平居中，我們設置寬度然后配合以margin可以實現水平居中。而對于設置了top/bottom,left/right的absolute定位元素，我們設置寬高再配合margin就可以達到水平垂直居中：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  height: 100px;
  margin: auto;
  border: 1px solid green;
}

效果：

兼容性很好，IE8以上支持。

3. transform + absolute

??absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進行定位；transform是CSS3中非常強大的一個屬性，可以接收多個屬性值，包括旋轉、縮放、平移等多種功能。這里使用二者配合，先將子元素左上定點定位到父元素中心點，再使用transform將子元素中心點移動到父元素的中心點即可：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  border: 1px solid green;
}

效果：

??這個方法有個小缺陷，就是translate函數的參數，最后的計算值不能為小數，否則有的瀏覽器渲染出來效果會模糊，所以使用本方法的話最好設置一下寬高為偶數。

4. absolute+margin負值

??與上一種方法很類似，上一種方法是使用transform將元素向左上平移，本方法則是使用margin負值的方式將元素拉向左上角。
代碼：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;
  margin-left: -100px;
  border: 1px solid green;
}

效果：

5. absolute + calc

??從上兩種方法可以看到，absolute設置了left和top再通過平移或者margin將元素重新定位回去。如果我們直接可以計算出正確的left和top值，豈不是一次到位？calc函數正有此功能，當然我們需要知道子元素的寬高：

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  text-align: center;
  position: relative;
}

.content {
  position: absolute;
  border: 1px solid green;
  width: 200px;
  height: 100px;
  left: calc(50% - 100px);
  top: calc(50% - 50px);
}

效果：

6. line-height + vertical-align

??vertical-align是一個作用于內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是默認情況下是與父元素“基線對齊”的。這里的的基線指的是父元素每一行中的一個垂直位置，是英文ｘ下邊緣所在的水平, 通過設置vertical-align為middle可以將內聯元素的中部對齊父元素的中部（基線+字母ｘ的一半高度）。所以可以利用這一點，將父元素的行高設置為其自身高度，然后將子元素與父元素中線對齊，即可實現垂直居中。
代碼：

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  line-height: 300px;
  text-align: center;
}

.content {
  display: inline-block;
  line-height: 1.5;
  border: 1px solid green;
  vertical-align: middle;
}

效果：

以上幾種方法各有不同的適用條件，因此也有不同的優缺點，下表對各種方法進行了比較：

方法	條件	兼容性
flex布局	無	IE10+
margin + absolute	知道子元素寬高	IE8+
transform + absolute	無，子元素寬高應為偶數	IE10+
absolute + margin負值	知道子元素寬高
absolute + calc	知道子元素寬高	IE9+
line-height + vertical-align	知道父元素寬高

??CSS中同一種表現效果往往有多種不同的實現方法，要刻意地嘗試多種寫法，避免熟悉了一兩種方法就止步不前，這樣才能對各種情況得心應手。

本文最先發布于:http://wintc.top/site/article...，轉載請注明出處。

云服務器 GPU云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114526.html

不定元素寬高用css實現內容水平和垂直都居中

摘要：在開發中經常遇到這個問題，即讓某個元素的內容在水平和垂直方向上都居中，內容不僅限于文字，可能是圖片或其他元素。這篇文章就來總結一下都有哪些方法可以實現水平和垂直都居中。表示這些元素將相對于本容器水平居中，也是同樣的道理垂直居中。在開發中經常遇到這個問題，即讓某個元素的內容在水平和垂直方向上都居中，內容不僅限于文字，可能是圖片或其他元素。而且我們希望不要涉及寬度和高度，也就是說，我們不...

Chao 2019-08-30 15:52 評論0 收藏0
css 垂直居中方法匯總

摘要：優點寫法簡單，適應性好缺點兼容性一般，不支持瀏覽器小節以上共有種方式來實現垂直居中的效果，個人是最青睞第種方式的，兼容性好，適應性好，各位小伙伴還有沒有其他的實現方式呢查看原文可以有更好的排版效果哦前言居中是平時工作中的最常見的一種需求，各種圖片居中或者各種彈窗，水平居中還好，特別是垂直居中，很多初學者表示太難寫了，現在列舉一些常用的方法。實戰這里只講述css相關的方法，js...

CarterLi 2019-08-29 16:41 評論0 收藏0
前端面試每日3+1（周匯總2019.08.11）

摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面試每日3+1題，以面試題來驅動學習，每天進步一點！讓努力成為一種習慣，讓奮斗成為一種享受！相信堅持的力量！！！項目...

Baoyuan 2019-08-30 15:44 評論0 收藏0
前端面試每日3+1（周匯總2019.08.11）

摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面試每日3+1題，以面試題來驅動學習，每天進步一點！讓努力成為一種習慣，讓奮斗成為一種享受！相信堅持的力量！！！項目...

馬永翠 2019-08-26 10:42 評論0 收藏0
前端培訓-初級階段（13、18）

摘要：年月歐洲計算機制造商協會發表了標準，它是的一個擴延，它也被稱為年月首版年月日截止發布日期，的官方名稱是，國際意在更頻繁地發布包含小規模增量更新的新版本，下一版本將于年發布，命名為。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的...

YorkChen 2019-08-23 16:22 評論0 收藏0