CSS 3 實現水平垂直居中效果

2021-09-26 23:51:21 字數 2456 閱讀 3155

在css中實現水平居中，會比較簡單。常見的，如果想實現inline元素或者inline-block元素水平居中，可以在其父級塊級元素上設定

text-align: center
實現；如果想實現塊級元素的水平居中對齊，可以設定
magin: auto
。而如果想實現垂直居中對齊，或許就不太容易。

以下，我總結了一些實現水平垂直居中對齊的一些方法。如果有什麼不足之處，望指出。

水平垂直居中的實現可以分為兩大內容，一是高度隨內容自適應變化，一是固定高度。

最常用的方法是使用height line-height的方式，設定同樣的值，配合text-align的使用，即可實現文字的水平垂直居中對齊

hello world！


.container
缺點：固定高度，無法實現兩行文字的垂直居中對齊

使用絕對定位的方法，配合margin負值使用。可以實現元素的水平垂直居中效果。

hello world！


.container
當然了，可以使用css3的calc函式簡化上面的css**

.container
缺點：固定高度，高度無法自適應內容。元素脫離文件流。

新增空標籤的方式，並且使該元素浮動，脫離文件流，避免影響其他元素的布局。



hello world！


.space 


.container
缺點：這種方式下的垂直居中需要固定高度，無法實現內容自適應高度。同時，出現多餘的空div元素。

css3中有transform屬性，此屬性下有乙個translate移動函式，此函式接受兩個引數。如果兩個引數都為百分比值，此時會基於自身寬度和高定進行移動。此函式移動的機制同

position:relative
相似。

hello world！


.container
優點：無需定高度。高度隨內容自適應。

缺點：元素脫離文件流。如果需要居中的元素已經在高度上超過了視口，那它的頂部會被視口裁切掉。

我們知道，可以使用margin來實現水平居中對齊，而無法使用margin實現垂直居中的原因在於margin的百分比值是基於寬度計算的。

hello world！


.container
上面**中，由於百分比是基於父元素（此時的父元素為body元素）的寬度計算的，所以此時的50%加上translate負值並不能實現垂直居中布局。

不過，css中存在乙個vh（視口高度）,也就相當於dom中

document.body.clientheight
或者
document.documentelement.clientheight
的高度，1vh=1%，即1vh等於視口高度的1%。vh單位的瀏覽器相容性問題可看

vh。因此，以上**可改為如下，即可實現水平垂直居中效果。

hello world！


.container
css3中存在flex布局（伸縮布局盒模型，也叫彈性布局盒模型），對於flex熟悉的朋友來說，使用flex實現水平垂直居中是再簡單不過的了。

hello world!


.container 


.inner
當我們使父元素

display: flex
時，
margin: auto
不僅可以水平居中，也能夠實現垂直居中。這是因為auto外邊距會平分水平或垂直方向上的額外空間。

當然，也可以使用

justify-content: center
來定義彈性專案主軸的對齊方式，
align-items: center
來定義彈性專案側軸的對齊方式。

hello world


.container
可以使用

display: table
來模擬**，並給子元素設定
display: table-cell
，讓其成為**的某個單元格，同時設定
vertical-align: middle
，即可實現垂直居中布局

hello world！


.container 


.inner
使用此種方式，不需要固定高度。只需要給定任意高度或者不給高度，即可實現水平垂直居中效果。

CSS 3 實現水平垂直居中效果

在css中實現水平居中，會比較簡單。常見的，如果想實現inline元素或者inline block元素水平居中，可以在其父級塊級元素上設定text align center實現 如果想實現塊級元素的水平居中對齊，可以設定magin auto。而如果想實現垂直居中對齊，或許就不太容易。以下，我總結了一...

css實現水平居中 垂直居中 垂直水平居中布局

1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...