朝花夕拾：CSS居中完全指南

laznrbfe 發布于2019-08-29 13:45 / 1238人閱讀

摘要：正文居中是常被開發者抱怨的問題之一。注意你不能將浮動元素居中。水平且垂直居中你可以將前面的方法任意組合起來，實現完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。

參考

Centering in CSS: A Complete Guide

BY CHRIS COYIER ON SEPTEMBER 2, 2014

附：文中涉及到了flex的一些用法，如果沒有接觸過flex布局，建議看一下阮一峰老師的這篇指南：Flex 布局教程：語法篇

博客文章地址：https://guitong.github.io/blo... 顯示效果更佳。

正文：Centering in CSS: A Complete Guide

CSS居中是常被開發者抱怨的問題之一。Why dose it have to be so hard?? They jeer. 我認為問題不在于它實現起來有多難，而是有太多能夠實現它的方法。在不同的情景下，如何去選擇，才是真正困惑我們的地方。

所以現在，讓我們來做一個決策樹，使CSS居中問題更容易解決。

水平居中 --> Is it inline or inline-* elements (like text or links)?

它是行內或類行內元素嗎？（比如文本和鏈接）

你可以將行內元素置于塊級父元素內，然后用下面的CSS代碼來使其水平居中：

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

https://codepen.io/chriscoyie...

這種方法適用于inline，inline-block，inline-table，inline-flex等類型的元素。

--> Is it a block level element?

它是一個塊級元素嗎？

為了居中一個塊級元素，你可以設置它的margin-left和margin-right值為auto（它的width值已給定，否則將占滿容器，也就不需要居中了）。通常簡寫如下：

.center-me {
  margin: 0 auto;
}

https://codepen.io/chriscoyie...

無論我們將要居中的塊級元素或父元素的寬度如何，這都將起作用。

注意你不能將浮動元素居中。There is a trick though.

--> Is there more than one block level element?

有多個塊級元素嗎？

如果你需要將多個塊級元素水平居中于單行，一個好的辦法是改變它們的dispaly類型。這里有兩個例子，分別使用了inline-block和 flexbox 方法實現：

https://codepen.io/chriscoyie...

除非你是想讓它們堆疊在一起，那么剛才使用的設置自動外邊距值將仍然有效。

https://codepen.io/chriscoyie...

垂直居中

垂直居中在CSS中比較棘手。

--> Is it inline or inline-* elements (like text or links) ?

它是行內或類行內元素嗎？

~~> Is it a single line?

是單行嗎？

有時行內／文本元素能垂直居中顯示，僅僅是因為它們有相等的上下padding值。

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

https://codepen.io/chriscoyie...

如果由于某些原因，設置padding的方法并不可選，而你需要居中已知不會換行的文本，有一個技巧是使其line-height值與其height值相等。

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

https://codepen.io/chriscoyie...

~~> Is it multiple lines?

是多行嗎？

對于多行文本的情況，依然可以使用上下padding相等的方法使其垂直居中，但是如果這種方法失效了，可能文本所在的元素是一個table cell，不管是通過字面量定義的還是通過CSS定義的。（紅葉注：這里的意思就是該元素可以是直接使用表格標簽聲明，也可以是為元素設置display:table-cell;屬性而使其成為一個table cell，父元素設置display:table; ）。如果是文本在這樣的元素內，該元素默認有CSS屬性vertical-align:middle;，所以不需要我們顯示地設置。然而，如果你是手動更改CSS使其成為table cell元素的，就需要顯示地加入這個屬性vertical-align:middle;。

(More on that.)

下面的例子非常清晰地展示了這種方法：

https://codepen.io/chriscoyie...

如果你不喜歡或者這種方法也不好使，也許你可以用flexbox？單個子flex元素可以非常輕松地在父flex元素內垂直居中。

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

https://codepen.io/chriscoyie...

但是要記住，上面的討論都是基于元素父容器有一個固定的高度（px，%，etc）。

如果這些方法都無法實現，你可以采用“ghost element”技術，將一個全高度的偽元素將放置于容器中，文本將與其垂直對齊。

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

https://codepen.io/chriscoyie...

—> Is it a block-level element?

它是一個塊級元素嗎？

~~> Do you know the height of the element?

知道元素的高度嗎？

不知道網頁布局的高度是相當常見的，有很多原因：如果文本的寬度改變，那么重布局時高度就會改變；文本樣式的改變會改變高度；文本數量改變會改變高度；具有固定縱橫比的元素（如圖像），會在尺寸改變時影響高度。Etc。

但是如果你明確地知道高度，可以像這樣使其垂直居中：

.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; */
}

https://codepen.io/chriscoyie...

~~> Is the element of unknown height?

未知元素高度？

沒關系。你仍然可以使用類似上面的方法使其居中。先將其絕對定位至父元素半高位置，再提升自身半高距離即可。

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

https://codepen.io/chriscoyie...

~~> Can you use flexbox?

你可以使用flexbox嗎？

如果可以，那就相當簡單了。

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

https://codepen.io/chriscoyie...

水平且垂直居中

你可以將前面的方法任意組合起來，實現完美的居中效果。但是我發現通常可以將其分為三類：

—> Is the element of fixed width and height?

元素有固定的寬度和高度嗎？

先將元素絕對定位至50%／50%位置，然后加入負margin值，使該值等于高度和寬度的一半（注：元素如果有padding要記得計算進去，參考下例）。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  margin: -70px 0 0 -170px;
}

https://codepen.io/chriscoyie...

—> Is the element of unknown width and height?

元素的寬度與高度未知？

如果你不知道該元素的寬高，可以將它的transform屬性設置為translate(-50%, -50%)。也可以達到相同的效果。

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

https://codepen.io/chriscoyie...

—> Can you use flexbox?

你可以使用flexbox嗎？

在水平和垂直兩個方向上居中元素，你需要用到flex的兩個屬性：

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

https://codepen.io/chriscoyie...

—> Can you use grid?

這是一個小技巧，對單個元素來說非常有效：

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

https://codepen.io/chriscoyie...

結論

You can totally center things in CSS !!!

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

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

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

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

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

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

AlienZHOU 2019-08-30 15:53 評論0 收藏0
CSS居中完全指南

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

qujian 2019-08-30 12:47 評論0 收藏0
vuejs&electron-vue----朝花夕拾.

摘要：推薦使用使用指定打包位。開發環境跨域代理設置如果是接口，需要配置這個參數如果接口跨域，需要進行這個參數配置通過新窗口打開項目內頁面 ————僅以此文記錄個人使用vuejs開發項目對一些需求的處理方法,不定期更新... 加載favicon.ico圖標 //index.html // build/webpack.dev.conf.js new HtmlWebpackPlugin({ ...

Awbeci 2019-08-22 17:03 評論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