CSS居中完全指南——構建CSS居中決策樹

AlienZHOU 發布于2019-08-30 15:53 / 1723人閱讀

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示

CSS居中完全指南——構建CSS居中決策樹

本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到CSS居中問題時有章可循.

參考Centering in CSS: A Complete Guide和【基礎】這15種CSS居中的方式，你都用過哪幾種

本文的引用歸原作者所有.

代碼在線演示工具JSbin使用指南

1.Horizontally 水平居中 1.1 inline或inline-*元素水平居中

給需要居中的元素一個block父元素,需要居中子元素為文本或者 inline, inline-block, inline-table, inline-flex

核心代碼

.center-children {
  text-align: center;
}

JSbin演示地址
效果:

1.2block元素水平居中

父元素為block,子元素也為bolck,且子元素設置了寬度(沒寬度子元素就繼承父元素寬度,居中沒有意義).
無論正在居中塊級元素的寬度或父級的寬度如何，都會起作用。

方法:子元素margin: 0 auto;左右外邊距設置為自動填充

核心代碼

.center-me {
  margin: 0 auto;
}

效果:

block元素水平居中JSbin演示地址

1.3多個block元素水平居中 1.3.1 多個block元素一行排列水平居中

方法一:利用inline-block,原理是將子元素轉化為inline-block.再用text-align: center;

方法二:利用display: flex.注意:子元素高度會保持一致.看下方例子.

核心代碼:

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

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

效果:

多個block元素一行排列水平居中JSbin演示地址

1.3.2 多個block元素每行一個水平居中

因為每個block元素獨占一行,所以方法仍然是margin: 0 auto;

演示:

多個block元素每行一個水平居中JSbin演示

2.Vertically垂直居中

垂直居中比較麻煩

2.1 inline 或 inline-* 元素單行垂直居中

需要垂直居中的元素為單行的inline 或 inline-* 元素,例如一個text或者a鏈接(包括a鏈接變化而成的按鈕)

2.1.1 方法一:上下使用相同的padding(推薦)

上下和左右使用相同的padding可以不用設置寬高,既可以在修改文本內容是自適應,又可以減少出現BUG的幾率.
核心代碼:

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

演示:

方法一:上下使用相同的paddingJSbin演示地址

2.1.2 方法二:設置line-height與高度相同

核心代碼

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
/*nowrap文本內的換行無效內容只能在一行顯示*/
}

設置line-height與高度相同JSbin演示地址

2.2 多行文本垂直居中

多行文本使用增加上下padding垂直居中的方法仍然有效且良好,不需設置寬高,推薦使用.
如果這樣做不起作用，那么文本所在的元素可能是table或者table-cell元素，無論是真正的table還是后期自己添加的CSS.
下面說說這兩種情況使用其他方法的垂直居中.

2.2.1:方法一:display: table;和vertical-align: middle;

核心代碼:

.center-table {
  display: table;
  
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

table+vertical-align: middle多行文本垂直居中JSbin演示

2.2.2 使用flex布局多行文本居中

一個flex-child可以簡單地在flex-parent的中心.
核心代碼

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

使用flex多行文本居中JSbin演示地址

2.3 block元素垂直居中 2.3.1已知block元素高度

原理是絕對定位,top: 50%;然后 margin-top設置為負邊距且值為他本身高度的一半.
核心代碼:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

注意:使用 position: absolute;絕對定位會使元素脫離文檔流

已知block元素高垂直居中演示

2.3.2 block元素高度未知垂直居中

借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在兼容性的問題。
核心代碼:

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

transform用法

block元素高度未知垂直居中JSbin演示

2.3.3 使用flex布局block元素高度未知垂直居中

核心代碼:

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

用flex布局block元素高度未知垂直居中JSbin演示

3.Both Horizontally and Vertically水平垂直居中 3.1有固定寬高的元素

核心代碼:
依舊是絕對定位+寬高一半的負邊距

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

有固定寬高的元素JSbin演示

3.2 寬高不固定

利用2D變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。

核心代碼

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

寬高不固定水平垂直居中JSbin演示

3.3 使用flex布局垂直水平居中

核心代碼:

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

使用flex布局垂直水平居中JSbin演示

3.4 使用grid布局垂直水平居中

核心代碼:

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

使用flex布局垂直水平居中JSbin演示

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

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

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
朝花夕拾：CSS居中完全指南

摘要：正文居中是常被開發者抱怨的問題之一。注意你不能將浮動元素居中。水平且垂直居中你可以將前面的方法任意組合起來，實現完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果沒有接...

laznrbfe 2019-08-29 13:45 評論0 收藏0
CSS居中完全指南

摘要：原載于，本文著重提取文中的方法，不完全翻譯。人們經常抱怨在中居中元素的問題，其實這個問題其實并不復雜，只是因為方法眾多，需要根據情況從眾多方法中選取一個出來。原載于CSS-Trick，本文著重提取文中的方法，不完全翻譯。如有需要，直接原文查看。人們經常抱怨在CSS中居中元素的問題，其實這個問題其實并不復雜，只是因為方法眾多，需要根據情況從眾多方法中選取一個出來。接下來，我們做一個‘...

qujian 2019-08-30 12:47 評論0 收藏0
CSS 居中完全指南

摘要：在文本前面插入一個高度為百分百的偽元素，讓文本與其垂直對齊。塊級元素或者使用垂直水平居中或者使用翻譯自 https://css-tricks.com/centering-css-complete-guide/ 預先給出這樣的樣式 .container { width: 100%; height: 200px; background-color: azur...

hqman 2019-08-30 13:03 評論0 收藏0
居中的css:完全指南(翻譯)

摘要：水平水平居中有行內元素和塊元素，行內元素有文字圖片鏈接等塊元素主要是等元素。塊元素對于一個塊元素，可以設置其和自動，就像這樣在線查看無論塊元素的寬度是否已知，都可以實現水平居中。這里主要參考的是CHRIS COYIER寫的一篇的文章(點擊查看)，主要講了關于css水平、垂直居中的一些方法,每個方法后面都有一個demo，可以在線查看效果。 1 水平水平居中有行內元素和塊元素，行內元素...

Integ 2019-08-30 12:54 評論0 收藏0