主流的CSS水平和垂直居中技術大全

KoreyLee 發布于2019-08-29 16:26 / 664人閱讀

摘要：水平居中行內元素的水平居中在父元素中設置只對內聯元素或行內塊元素有效需要放置于父元素中塊級元素的水平居中只對塊級元素有效指的是自適應寬度。參考張鑫旭實現絕對定位元素的居中及原理居中方式水平居中垂直居中塊級元素設置內聯元素設置。

原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html

幾個月也零零散散學了不少CSS居中技術，每到用的時候，發現總是稀里糊涂的，有時不知道該選用哪種技術，有時候又常常把方法搞混，索性好好整理一下，以后查閱回顧也更方便。這里只簡單總結了大部分主流的居中方法，如果有發現更加牛皮好用的，會不斷的更新進來。

水平居中 行內元素的水平居中

text-align:center（在父元素中設置）

只對內聯元素或行內塊元素有效

需要放置于父元素中

塊級元素的水平居中

margin: 0 auto;

只對塊級元素有效

auto指的是自適應寬度。實質就是均分了元素左右的剩余空間，所以元素會居中。

auto只有在塊級元素設置了寬度width才有效(塊級元素不設寬度默認就占整行了，所以是廢話)

auto無法實現塊級元素的垂直居中，原因與CSS默認的高度計算規則有關，這里暫不深究。但margin:auto可以實現絕對定位元素的水平垂直居中，見下文。

參考：為什么margin為auto不能垂直居中？、為什么「margin:auto」可以讓塊級元素水平居中？、張鑫旭——margin:auto實現絕對定位元素的居中及原理

垂直居中 行內元素的垂直居中

line-height: 父元素的高度;（在父元素中設置）

只對內聯元素或行內塊元素有效

需要知道父元素的高度

需要放置于父元素中

適用于垂直方向上只有一個需要居中的元素的情況（想同時垂直居中多個元素時，可以用padding）

vertical-align: middle;（用于垂直對齊inline元素）

只對內聯元素或行內塊元素有效

主要用在文本和與文本相鄰元素的垂直方向上的對齊問題（主要是對齊的作用，而不是居中的作用），

例如將一個icon與文字對齊。

使用vertical-align需要了解文字的baseline和line-box等知識，可參考：[[翻譯]關于Vertical-Align你需要知道的事情](https://segmentfault.com/a/11...、我對CSS vertical-align的一些理解與認識（一）

水平垂直居中 浮動元素

使用position:relative;

具體方法與絕對定位的第1個和第2個方法類似，只不過把absolute改為relative，并根據原float的方向稍作修改即可。

相對定位relative可以和float疊加，在float后的位置上再相對定位。

缺點就是float元素居中后仍會占據原來的位置。

第二種方式中，如果設定了浮動元素的高度，將會影響transform的具體值。

絕對定位元素

使用50%推進法則

position: absolute;
left: 50%;
top: 50%;
margin-left: -該元素自身寬度的一半px;      /*水平居中*/
margin-top: -該元素自身高度的一半px;      /*垂直居中*/

只對絕對定位的元素有效

需要知道絕對定位元素的寬高

兼容性很好，是一種主流用法

第一種方法的改進版，使用transform代替margin

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);  /*水平垂直居中*/

不需要知道絕對定位元素的寬高。（如果設置了高度，則有可能影響到transform的具體值）

兼容性一般，IE10+以及其他現代瀏覽器支持

使用margin:auto;

position: absolute;
left: 0;
right: 0;           /*水平居中*/
top: 0;
bottom: 0;          /*垂直居中*/
margin: auto;

只對絕對定位的元素有效

不必知道寬高，但需要是圖片這種自身包含尺寸的元素

left與right必須配對出現，top與bottom必須配對出現

目前支持IE9+，及其他瀏覽器。

參考：張鑫旭——margin:auto實現絕對定位元素的居中及原理

flex居中方式

display: flex;
justify-content: center;  /*水平居中*/
align-items: center;      /*垂直居中*/

塊級元素設置display: flex;,內聯元素設置display: inline-flex;。

需要注意的幾個問題

元素浮動后仍可以設置margin屬性，但auto不會起作用。

圖片居中的問題

注意：如果圖片的寬度大于父元素的寬度, 不能使用margin: 0 auto;或者text-align: center;讓圖片居中

如果圖片的寬度大于父元素的寬度, 可以絕對定位中的居中方式讓圖片居中。但是定位流的弊端也比較明顯。它必須知道圖片寬度。

如果圖片的寬度大于父元素的寬度, 也可以使用margin: 0 -100%;

（注意: 父元素必須設置text-align: center;）

云服務器 GPU云服務器水平垂直居中 html的水平居中垂直居中實現垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113746.html

常用的CSS水平垂直居中方法大全

摘要：作為一名程序媛在編寫頁面的時候經常還會遇到水平或者垂直居中的一些布局今天正好有空就把各種居中的方式都總結了一下分享給大家希望能給大家帶來幫助已知寬高背景圖與背景圖上的文字都水平垂直居中有寬度的水平居中有絕對定位的水平居中作為一名程序媛在編寫頁面的時候經常還會遇到水平或者垂直居中的一些布局今天正好有空就把各種居中的方式都總結了一下分享給大家希望能給大家帶來幫助 1.已知寬高背景圖與背景...

bergwhite 2019-08-29 12:38 評論0 收藏0
常用的CSS水平垂直居中方法大全

摘要：作為一名程序媛在編寫頁面的時候經常還會遇到水平或者垂直居中的一些布局今天正好有空就把各種居中的方式都總結了一下分享給大家希望能給大家帶來幫助已知寬高背景圖與背景圖上的文字都水平垂直居中有寬度的水平居中有絕對定位的水平居中作為一名程序媛在編寫頁面的時候經常還會遇到水平或者垂直居中的一些布局今天正好有空就把各種居中的方式都總結了一下分享給大家希望能給大家帶來幫助 1.已知寬高背景圖與背景...

muzhuyu 2019-08-01 16:53 評論0 收藏0
CSS居中總結大全

摘要：中居中的幾種方式水平居中塊級元素在塊級元素中居中設置在子元素上，前提是不受影響只對行級元素有用行級元素設置浮動，或者設置定位之后。 CSS中居中的幾種方式 1.水平居中margin：0 auto；塊級元素在塊級元素中居中設置在子元素上，前提是不受float影響 2.text-align只對行級元素有用,行級元素設置浮動，或者設置定位之后。給它的父元素設置text-aglin：cente...

Cruise_Chan 2019-08-30 15:55 評論0 收藏0
前端面試大全

摘要：一般情況下是全局對象。避免在頁面的主體布局中使用，要等其中的內容完全下載之后才會顯示出來，顯示布局慢。對普通的網站有一個統一的思路，就是盡量向前端優化減少數據庫操作減少磁盤。 HTML面試題 1.XHTML和HTML有什么區別 HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言最主要的不同： XHTML 元素必須被正確地嵌套。 XHTML 元素必須被關閉。...

dingda 2019-08-29 11:01 評論0 收藏0