文章目錄

• • 水平居中布局
  • • text-align
    • margin + auto
    • float + margin auto
    • position + transform / margin
    • flex + justify-content
    • display - table 水平居中
    • grid 水平居中
  • 垂直居中布局
  • • height + line-height
    • vertical-align
    • table + vertical-align
    • absolute + translateY / margin
    • flex + align-item
    • grid
  • 水平垂直居中布局
  • • text-align + line-height
    • absolute + 子元素寬高固定
    • absolute + (寬高不固定）transform
    • writing-mode
    • table 水平垂直居中
    • flex + justify-content + align-item
    • grid

本文總結(jié)了一下 CSS 水平、垂直居中的實現(xiàn)方式。在開始之前做些準(zhǔn)備工作， HTML 代碼結(jié)構(gòu)如下，總共兩個元素，父元素和子元素， size 是用來設(shè)置定寬定高的，后面不在重復(fù)下面的代碼

<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

子元素居中：父元素是塊級元素，子元素是行內(nèi)或行內(nèi)塊級元素

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

優(yōu)點：兼容性好，簡單

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

margin + auto

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

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

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

優(yōu)點：兼容性好，簡單

缺點：要給出元素的寬度

float + margin auto

父元素居中：如果子元素是浮動元素，若想讓子元素居中，給父元素寬度 width 設(shè)置為 fit-content , margin 設(shè)置為 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; }

優(yōu)點

簡單，容易理解

缺點

• transform IE8 瀏覽器不支持
• absolute 子元素脫離標(biāo)準(zhǔn)文檔流，父元素高度為 0 ，如果不想影響父元素后面兄弟元素布局，要給父元素添加高度

flex + justify-content

子元素居中 ：使用 flex 伸縮布局，子元素寬度默認(rèn)為 auto，由內(nèi)容撐開

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

優(yōu)點：簡單，寫法靈活

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

display - table 水平居中

display: table 使用 CSS 屬性實現(xiàn) table 表格布局

• display: table -> table 塊級元素
• display: inline-table -> table 內(nèi)聯(lián)元素
• 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; }

常用場景：表格布局

優(yōu)點：兼容到 IE8，可以和 flex 配合使用; CSS 的table屬性布局更靈活，可以滿足復(fù)雜的網(wǎng)頁設(shè)計

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

grid 水平居中

子元素居中

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

優(yōu)點：grid 是二維網(wǎng)格布局，每個網(wǎng)格都是一個容器

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

垂直居中布局

height + line-height

若元素是單行文本, 可設(shè)置 line-height 等于父元素高度

優(yōu)點：兼容性好，簡單

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

vertical-align

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

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

優(yōu)點

寫法很流行，能適應(yīng) IE7

缺點

不好理解

table + vertical-align

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

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

優(yōu)點

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

缺點

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 {} }

優(yōu)點：簡單，寫法靈活

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

grid

子元素垂直居中

// 實現(xiàn)方式1 .parent {display: grid;align-content: center; // 新增.child {} }// 實現(xiàn)方式2 .parent {display: grid;.child {align-self: center; // 新增} }

水平垂直居中布局

text-align + line-height

height 和 line-height 高度一樣

absolute + 子元素寬高固定

• absolute + margin
• absolute + calc

子元素水平垂直居中

// 實現(xiàn)方式一 .parent {position: relative;.child {position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;} }// 實現(xiàn)方式二 .parent {position: relative;.child {position: absolute;top: calc(50% - 50px); // 新增left: calc(50% - 50px); // 新增} }

優(yōu)點

容易理解

缺點

• 需要知道子元素寬高
• 依賴 css3 的 calc 函數(shù)，要考慮兼容性

absolute + (寬高不固定）transform

.parent {position: relative;.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} }

writing-mode

writing-mode 可以改變文字的顯示方向，通過writing-mode和text-align就可以做到水平和垂直方向的居中了

<style> .parent {writing-mode: vertical-lr;text-align: center; } .child {writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%; } .box {display: inline-block;margin: auto;text-align: left; } </style><div class="parent"><div class="child"><div class="box">我是孩子</div></div> </div>

缺點 ：這種方法實現(xiàn)起來和理解起來都稍微有些復(fù)雜

table 水平垂直居中

.parent {display: table-cell;text-align: center;vertical-align: middle;.child {display: inline-block;} }

flex + justify-content + align-item

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

注 ：目前在移動端已經(jīng)完全可以使用flex了，PC端需要看自己業(yè)務(wù)的兼容性情況

grid

// 實現(xiàn)方式一 .parent {display: grid;justify-content: center;align-content: center; }// 實現(xiàn)方式二 .parent {display: grid; } .child {align-self: center;justify-self: center; }

注 ：兼容性不如flex，不推薦使用

總結(jié)

以上是生活随笔為你收集整理的水平、垂直居中布局大全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。