水平、垂直居中佈局大全

本文總結了一下 CSS 水平、垂直居中的實現方式。在開始之前做些準備工作，HTML 代碼結構如下，總共兩個元素，父元素和子元素，size 是用來設置定寬定高的，後面不在重複下面的代碼

<style>
body {
    background: beige;
}
.parent {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.child {
    background: green;    
}

.child.size{
    width: 100px;
    height: 100px;
}
</style>

<div class="parent">
    <div class="child size">我是孩子</div>
</div>

水平居中佈局

text-align

子元素居中：父元素是塊級元素，子元素是行內或行內塊級元素

.parent {
  text-align: center;
  .child {
    display: inline-block;
  }
}

優點：兼容性好，簡單

缺點：子元素內的字體對齊方式由於繼承也會居中，如果子元素字體向左對齊要添加 text-align: left

margin + auto

子元素居中 ：元素是塊級元素，margin 左右對齊

.parent {
  .child {
    margin: 0 auto;
  }
}

常用場景：具有版心左右留白居中的頁面

優點：兼容性好，簡單

缺點：要給出元素的寬度

float + margin auto

父元素居中：如果子元素是浮動元素，若想讓子元素居中，給父元素寬度 width 設置爲 fit-content , margin 設置爲 0 auto

.parent {
  width: fit-content;
  margin: 0 auto;
  overflow: hidden; // BFC 清除浮動
  .child {
    float: left;
  }
}

缺點：fit-content 是 CSS3 新增加的屬性，只支持 Chrome 和 Firefox 瀏覽器

position + transform / margin

子元素居中 ：父元素相對定位，子元素絕對定位

// 方式一
.parent {
  position: relative;
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

// 方式二
.child {
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

// 方式三
.child {
  position: absolute;
  left: calc(50% - 50px); // 新增
}

// 方式四
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}

優點

簡單，容易理解

缺點

transform IE8 瀏覽器不支持
absolute 子元素脫離標準文檔流，父元素高度爲 0 ，如果不想影響父元素後面兄弟元素佈局，要給父元素添加高度

flex + justify-content

子元素居中 ：使用 flex 伸縮佈局，子元素寬度默認爲 auto，由內容撐開

.parent {
  display: flex;
  justify-content: center;
  .child {

  }
}

優點：簡單，寫法靈活

缺點：不兼容 IE9（包括IE9) 之前的版本

display - table 水平居中

display: table 使用 CSS 屬性實現 table 表格佈局

display: table -> table 塊級元素
display: inline-table -> table 內聯元素
display: table-row -> tr
display: table-cell -> td、th
display: table-header-group -> thead
display: table-row-group -> tbody
display: table-footer-group -> tfoot
display: table-column -> col
display: table-column-group -> colgroup
display: table-caption -> caption

父元素居中

.parent {
  display: table;
  margin: 0 auto;
}

常用場景：表格佈局

優點：兼容到 IE8，可以和 flex 配合使用; CSS 的table屬性佈局更靈活，可以滿足複雜的網頁設計

缺點：不夠語義化化，對搜索引擎不夠友好，在不同瀏覽器呈現不一樣

grid 水平居中

子元素居中

// 實現方式1
.parent {
  display: grid;
  justify-content: center;
  .child {
  }
}
// 實現方式2
.parent {
  display: grid;
  .child {
    justify-self: center;
  }
}

優點：grid 是二維網格佈局，每個網格都是一個容器

缺點：grid 兼容性不是很好，不兼容 IE9(包括IE9)、QQ瀏覽器、百度瀏覽器和低版本的瀏覽器

垂直居中佈局

height + line-height

若元素是單行文本, 可設置 line-height 等於父元素高度

優點：兼容性好，簡單

缺點：只能設置單行文本，固定要高度

vertical-align

元素高度固定，若子元素是行內塊級元素, 基本思想是使用 display: inline-block, vertical-align: middle 和一個僞元素讓內容塊處於容器中央


.parent::after, .child {
    display: inline-block;
    vertical-align: middle;
  }
.parent::after {
  content: '';
  height: 100%;
}

優點

寫法很流行，能適應 IE7

缺點

不好理解

table + vertical-align

子元素居中 ：vertical-align 只有在父層爲 td 或者 th 時, 纔會生效, 對於其他塊級元素, 例如 div、p 等, 默認情況是不支持的. 爲了使用 vertical-align , 我們需要設置父元素 display:table-cell;vertical-align:middle

.parent {
  display: table-cell;
  vertical-align: middle;
  .child {
    
  }
}

優點

元素高度可以動態改變, 不需再CSS中定義, 如果父元素沒有足夠空間時, 該元素內容也不會被截斷.

缺點

IE6~7, 甚至IE8 beta中無效.

absolute + translateY / margin

子元素居中 ：父元素相對定位，子元素絕對定位，原理和水平居中一樣，只是水平外邊距改爲了垂直外邊距

// 方式一
.parent {
  position: relative;
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

// 方式二
.child {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

// 方式三
.child {
  position: absolute;
  top: calc(50% - 50px); // 新增
}

// 方式四
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
}

flex + align-item

子元素垂直居中

.flex-justify {
  display: flex;
  align-items: center;
  .child {
  }
}

優點：簡單，寫法靈活

缺點：不兼容 IE9（包括IE9) 之前的版本

grid

子元素垂直居中

// 實現方式1
.parent {
  display: grid;
  align-content: center; // 新增
  .child {
  }
}

// 實現方式2
.parent {
  display: grid;
  .child {
    align-self: center; // 新增
  }
}