如何居中乙個元素

2021-09-19 01:10:50 字數 4268 閱讀 3598

利用 text-align: center 可以實現在塊級元素內部的行內元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。

.parent
此外，如果塊級元素內部包著也是乙個塊級元素，我們可以先將其由塊級元素改變為行內塊元素，再通過設定行內塊元素居中以達到水平居中。

demo
這種情形可以有多種實現方式，下面我們詳細介紹:

①將該塊級元素左右外邊距margin-left和margin-right設定為auto

.child
②使用table+margin

先將子元素設定為塊級**來顯示（類似），再將其設定水平居中

display:table在表現上類似block元素，但是寬度為內容寬。

demo
③使用absolute+transform(不佔位置)

先將父元素設定為相對定位，再將子元素設定為絕對定位，向右移動子元素，移動距離為父容器的一半，最後通過向左移動子元素的一半寬度以達到水平居中。

demo
不過transform屬於css3內容，相容性存在一定問題，高版本瀏覽器需要新增一些字首。 

④使用flex+justify-content

通過css3中的布局利器flex中的justify-content屬性來達到水平居中。

demo
⑤使用flex+margin

通過flex將父容器設定為為flex布局，再設定子元素居中。

demo
①利用flex布局

利用彈性布局(flex)，實現水平居中，其中justify-content 用於設定彈性盒子元素在主軸（預設橫軸）方向上的對齊方式，本例中設定子元素水平居中顯示。

#container
源**演示②利用inline-block

將要水平排列的塊狀元素設為display:inline-block，然後在父級元素上設定text-align:center，達到與上面的行內元素的水平居中一樣的效果。

.container 


.inline-block
源**演示①定寬的非浮動元素

通過子元素設定relative + 負margin,原理見下圖：

②不定寬的浮動元素

通過父子容器都相對定位

注意：要清除浮動，給外部元素加上float。這裡的父元素就是外部元素

我是浮動的


我也是居中的


.box


p
③通用辦法flex布局(不管是定寬還是不定寬)

利用彈性布局(flex)的justify-content屬性，實現水平居中。

.parent 


.chlid


我是要居中的浮動元素
這種方式非常獨特，通過子元素絕對定位，外加margin: 0 auto來實現。

讓絕對定位的元素水平居中對齊。


.parent


.child


單行內聯元素垂直居中。。
①利用flex布局（flex）

利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。這種方式在較老的瀏覽器存在相容性問題。

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.
②利用表布局（table）

利用表布局的vertical-align: middle可以實現子元素的垂直居中

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.
①使用absolute+負margin(已知高度寬度)

通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現了。

固定高度的塊級元素垂直居中。


.parent 


.child
②使用absolute+transform

當垂直居中的元素的高度和寬度未知時，可以借助css3中的transform屬性向y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。

未知高度的塊級元素垂直居中。


.parent 


.child
③使用flex+align-items

通過設定flex布局中的屬性align-items，使子元素垂直居中。

未知高度的塊級元素垂直居中。


.parent
④使用table-cell+vertical-align

通過將父元素轉化為乙個**單元格顯示（類似 和 ），再通過設定 vertical-align屬性，使**單元格內容垂直居中。

demo


// css部分


#container 


#center 


// html部分(這部分不做變化,下面例子直接共用)


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

#container 


#center
利用css3的transform，可以輕鬆的在未知元素的高寬的情況下實現元素的垂直居中。

css3的transform固然好用，但在專案的實際運用中必須考慮相容問題，大量的hack**可能會導致得不償失。

#container 


#center
利用flex布局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。不能相容低版本的ie瀏覽器。

#container
容器元素設為 flex 布局或是grid布局，子元素只要寫 margin: auto 即可,不能相容低版本的ie瀏覽器。

#container 


#center

如何居中乙個div？如何居中乙個浮動元素？

居中乙個div 給div設定乙個寬度，margin 0px auto。position absolute top 50 left 50 transform translate 50 50 彈性盒居中 justify content center align items center 居中乙個浮動元素...

如何居中乙個div？如何居中乙個浮動元素？

第一種方法 居中乙個div 給div設定乙個寬度，margin 0px auto。position absolute top 50 left 50 transform translate 50 50 彈性盒居中 justify content center align items center 居中...

如何垂直居中乙個元素

前兩天剛寫完如何水平居中乙個元素，今天把垂直的情況補上。相比於水平居中，垂直居中的情況就少多了。1 行級元素的垂直居中 這種情況比較簡單，只需要設定line height和height相等即可，也沒什麼可延伸的。2 塊級元素的垂直居中 2.1 父元素高度不固定 其實我認為這種情況不用討論，正常情況下...