本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，集齊各種常用的居中方法，以備平時(shí)工作使用查閱，也歡迎大家更新或者提供建議

水平居中

1.行內(nèi)元素水平居中

利用 text-align: center 可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的行內(nèi)元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。

.parent{ text-align:center;//在父容器設(shè)置}

此外，如果塊級(jí)元素內(nèi)部包著也是一個(gè)塊級(jí)元素，我們可以先將其由塊級(jí)元素改變?yōu)樾袃?nèi)塊元素，再通過設(shè)置行內(nèi)塊元素居中以達(dá)到水平居中。如下

常常有一些初學(xué)者在使用text-align:center時(shí)會(huì)碰到不生效的問題，如下面的一個(gè)例子

p為塊狀元素，所以只需要在p的css代碼里設(shè)置display:inline或display:inline-block，將塊狀元素轉(zhuǎn)為內(nèi)聯(lián)元素即可。對于塊狀元素也可以使用margin:0 auto;來控制居中。

2.塊級(jí)元素的水平居中(5種方法)

這種情形可以有多種實(shí)現(xiàn)方式，下面我們詳細(xì)介紹:

1)將該塊級(jí)元素左右外邊距margin-left和margin-right設(shè)置為auto

.child{ width: 100px;//確保該塊級(jí)元素定寬 margin:0 auto;}

2)使用table+margin

先將子元素設(shè)置為塊級(jí)表格來顯示(類似)，再將其設(shè)置水平居中。display:table在表現(xiàn)上類似table元素，實(shí)現(xiàn)table一樣的居中效果，但是寬度為內(nèi)容寬。

Demo

3)使用absolute+transform

先將父元素設(shè)置為相對定位，再將子元素設(shè)置為絕對定位，向右移動(dòng)子元素，移動(dòng)距離為父容器的一半，最后通過向左移動(dòng)子元素的一半寬度以達(dá)到水平居中。

Demo

注：不過transform屬于css3內(nèi)容，兼容性存在一定問題，高版本瀏覽器需要添加一些前綴。

4)使用flex+justify-content

通過CSS3中的布局利器flex中的justify-content屬性來達(dá)到水平居中。

Demo

也會(huì)遇到和transform一樣的問題，需要注意瀏覽器的兼容性

5)使用flex+margin

通過flex將父容器設(shè)置為為Flex布局，再設(shè)置子元素居中。

Demo

垂直居中

單行內(nèi)聯(lián)元素垂直居中

單行內(nèi)聯(lián)元素垂直居中。。

2.多行內(nèi)聯(lián)元素垂直居中(2種方法)

1)利用flex布局(flex)

利用flex布局實(shí)現(xiàn)垂直居中，其中flex-direction: column定義主軸方向?yàn)榭v向。這種方式在較老的瀏覽器存在兼容性問題。

Dance like nobody is watching, code like everybody is. Dance like nobody is watching, code like everybody is. Dance like nobody is watching, code like everybody is.

2)利用表布局(table)

利用表布局的vertical-align: middle可以實(shí)現(xiàn)子元素的垂直居中

The more technology you learn, the more you realize how little you know. The more technology you learn, the more you realize how little you know. The more technology you learn, the more you realize how little you know.

3 塊級(jí)元素垂直居中(四種方法)

1)使用absolute+負(fù)margin(已知高度寬度)

通過絕對定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，就可以實(shí)現(xiàn)了。

必須要指定父元素的高度，否則出現(xiàn)高度塌陷的問題

2)使用absolute+transform

當(dāng)垂直居中的元素的高度和寬度未知時(shí)，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問題。

未知高度的塊級(jí)元素垂直居中。.parent {position: relative;}.child {position: absolute;top: 50%;transform: translateY(-50%);}

3)使用flex+align-items

通過設(shè)置flex布局中的屬性align-items，使子元素垂直居中。

未知高度的塊級(jí)元素垂直居中。.parent { display:flex; align-items:center;}

4)使用table-cell+vertical-align

通過將父元素轉(zhuǎn)化為一個(gè)表格單元格顯示(類似 和 )，再通過設(shè)置 vertical-align屬性，使表格單元格內(nèi)容垂直居中。

Demo

水平垂直居中(5種方法)

這種情形也是有多種實(shí)現(xiàn)方式。

方法1：絕對定位與負(fù)邊距實(shí)現(xiàn)(已知高度寬度)

注：這種方式需要知道被垂直居中元素的高和寬，才能計(jì)算出margin值，兼容所有瀏覽器。

方法2：絕對定位與margin:auto(已知高度寬度)

這種方式無需知道被垂直居中元素的高和寬，但不能兼容低版本的IE瀏覽器。

#container { position: relative; height:100px;//必須有個(gè)高度 } #center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;//注意此處的寫法 }

方法3：絕對定位+CSS3(未知元素的高寬)

利用Css3的transform，可以輕松的在未知元素的高寬的情況下實(shí)現(xiàn)元素的垂直居中。 CSS3的transform固然好用，但在項(xiàng)目的實(shí)際運(yùn)用中必須考慮兼容問題，大量的hack代碼可能會(huì)導(dǎo)致得不償失。

#container { position: relative; } #center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

方法4：flex布局

利用flex布局，其中justify-content 用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式；而align-items屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對齊方式。不能兼容低版本的IE瀏覽器。

#container {//直接在父容器設(shè)置即可 height: 100vh;//必須有高度 display: flex; justify-content: center; align-items: center; }

方法5：flex/grid與margin:auto

容器元素設(shè)為 flex 布局或是grid布局，子元素只要寫 margin: auto 即可,不能兼容低版本的IE瀏覽器。

#container { height: 100vh;//必須有高度 display: grid; } #center { margin: auto; }

鏈接文章

https://segmentfault.com/a/1190000013966650

https://juejin.im/post/5bc3eb8bf265da0a8a6ad1ce

https://segmentfault.com/a/1190000015095402

總結(jié)

以上是生活随笔為你收集整理的aspose.words 表格内容水平居中_CSS十五种方法教你如何居中一个元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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