你所不知道 ? CSS 居中

lewif 發布于2019-08-29 11:03 / 2828人閱讀

前言

這次翻譯一篇來自 Chris Coyier 的 《Centering in CSS: A Complete Guide》

居中是在CSS中經常被抱怨的問題之一。這個問題真的有這么難嗎？事實上這個問題并沒有那么復雜，它困難在于對于不同的情景，解決居中問題需要用到不一樣的方法。

在這里，我們會一起建立思維導圖來幫助大家來解決這個問題。

github 地址傳送門

腦圖

水平居中 行內元素

display屬性為inline 或者 inline-* 行內元素?（例如：文本或者鏈接）

如果你需要居中的行內元素在塊級元素中，你可以使用下面方法。

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

例子：傳送門

單個 - 塊級元素

如果需要使得塊級元素居中，可以利用margin-left和margin-right。

.center-me {
    margin: 0 auto;
}

例子：傳送門

注意：不能是一個浮動的塊級元素哦~

多個 - 塊級元素 - 同行居中

如果需要使得多個塊級元素居中，這個時候用 magin可就不行啦，但是我們可以使用inline-block或者flexbox來實現居中。

inline-block

利用行內元素在塊級元素中的居中方法，先讓內部的塊級元素變為行內元素，再對父級的塊級元素使用居中。

.center-parent {
    text-align: center;
}
.center-parent .center-child{
    display: inline-block;
}

flexbox

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

例子：傳送門

多個 - 塊級元素 - 同列居中

利用單個塊級元素的居中方法,來實現多個塊級元素的垂直居中。

.center-me {
    margin: 0 auto;
}

例子：傳送門

垂直居中 單行 - 行內元素

display屬性為inline 或者 inline-* 行內元素?（例如：文本或者鏈接）。可以利用padding或者line-height來實現。

padding

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

例子：傳送門

line-height （值和height一樣）

.text {
    height: 100px;
    line-height: 100px;
}

例子：傳送門

多行 - 行內元素

對于多行行內元素，如果使用單行的方法，在換行之后，會出現錯誤。這個時候可以利用表格的vertical-align或者flexbox或者偽類來實現。

vertical-align

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

例子：傳送門

flexbox

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

例子：傳送門

偽類

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

例子：傳送門

塊級元素

元素高度知道

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px; // 高度的一半
}

例子：傳送門

元素高度不知道

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

例子：傳送門

flexbox

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

例子：傳送門

垂直水平居中

寬度和高度知道(利用垂直居中的塊級元素高度知道)

.parent {
  position: relative;
}

.child {
  width: 200px;
  height: 100px;

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

  margin: -50px 0 0 -100px;
}

例子：傳送門

寬度和高度不知道(利用垂直居中的塊級元素高度不知道)

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

例子：傳送門

flexbox

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

例子：傳送門

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

GPU云服務器云服務器 html居中css 你所說說你所了解的人工智能知道

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

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

你所不知道的 CSS 負值技巧與細節

摘要：大家最為熟知的就是負，使用負的，可以用來實現類似多列等高布局垂直居中等等。那還有沒有其他一些有意思的負值使用技巧呢下文就再介紹一些負值有意思的使用場景。但是希望無論左側內容較多還是右側內容較多，兩欄的高度始終保持一致。寫本文的起因是，一天在群里有同學說誤打誤撞下，使用負的 outline-offset 實現了加號。嗯？好奇的我馬上也動手嘗試了下，到底是如何使用負的 outline-o...

FrozenMap 2019-08-30 15:44 評論0 收藏0
你所不知道的Python | 字符串格式化的演進之路

摘要：然而為了讓我們更方便的使用這個常用功能，語言本身也在對字符串格式化方法進行迭代。不少使用過的小伙伴會知道其中的模板字符串，采用直接在字符串中內嵌變量的方式進行字符串格式化操作，在版本中也為我們帶來了類似的功能字面量格式化字符串，簡稱。字符串格式化對于每個語言來說都是一個非常基礎和常用的功能，學習Python的同學大概都知道可以用%語法來格式化字符串。然而為了讓我們更方便的使用這個常用...

Blackjun 2019-07-30 16:50 評論0 收藏0
一些你所不知道的VS Code插件

摘要：摘要你所不知道的系列。允許你寫入縮寫代碼并返回的相應標記，目前已經內置，所以不用配置了。自從年雙十一正式上線，累計處理了億錯誤事件，付費客戶有金山軟件百姓網等眾多品牌企業。摘要：你所不知道的系列。原文：提高 JavaScript 開發效率的高級 VSCode 擴展之二！作者：前端小智 Fundebug經授權轉載，版權歸原作者所有。作為一名業余愛好者、專業人員，甚至是每月只有一次編...

Near_Li 2019-05-22 12:00 評論0 收藏0
你所不了解的querySelector

摘要：而事實上，它會在的子代元素中匹配查詢條件。它們并不會相對于任何特定的元素，甚至不會相對于調用的元素。偽選擇器是相對當前作用域進行匹配的。它們是和的替代方法，存在父節點上。了解像這些坑很重要，因為從它們的行為中很難了解它們的實質特性。原文鏈接地址：http://blog.lxjwlt.com/front-...筆者整理筆記： 1.API介紹先看看MDN上怎么介紹這個API的：概述返回...

freewolf 2019-08-20 11:39 評論0 收藏0
你所不知道的同比和環比真正的區別

摘要：給百度百科給的環比定義為環比，統計學術語，是表示連續個統計周期比如連續兩月內的量的變化比。二你所不知道的同比環比兩種方式的核心區別判斷兩個數據到底是同比還是環比。 ...

liujs 2021-10-09 09:43 評論0 收藏0

發表評論

登陸后可評論

0條評論

lewif

男|高級講師

我要關注我要私信

TA的文章

SSL端口映射測試

閱讀 1393·2021-11-22 15:11
那些年我用過的SAP IDE

閱讀 2838·2019-08-30 14:16
模塊化高效開發微信小程序—汽車試駕

閱讀 2755·2019-08-29 15:21
Codepen 每日精選（2018-4-26）

閱讀 2914·2019-08-29 15:11
前端調試利器 - Charles

閱讀 2450·2019-08-29 13:19
classList屬性

閱讀 2985·2019-08-29 12:25
JavaScript系列——JavaScript同步、異步、回調執行順序之經典閉包setTimeou

閱讀 417·2019-08-29 12:21
你所不知道 ? CSS 居中

閱讀 2829·2019-08-29 11:03

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

你所不知道 ? CSS 居中

github 地址 傳送門

display屬性為inline 或者 inline-* 行內元素?（例如：文本或者鏈接）

例子：傳送門

如果需要使得塊級元素居中，可以利用margin-left和margin-right。

例子：傳送門

注意：不能是一個浮動的塊級元素哦~

如果需要使得多個塊級元素居中，這個時候用 magin可就不行啦，但是我們可以使用inline-block或者flexbox來實現居中。

inline-block

flexbox

例子：傳送門

利用單個塊級元素的居中方法,來實現多個塊級元素的垂直居中。

例子：傳送門

display屬性為inline 或者 inline-* 行內元素?（例如：文本或者鏈接）。可以利用padding或者line-height來實現。

padding

例子：傳送門

line-height （值和height一樣）

例子：傳送門

對于多行行內元素，如果使用單行的方法，在換行之后，會出現錯誤。這個時候可以利用表格的vertical-align或者flexbox或者偽類來實現。

vertical-align

例子：傳送門

flexbox

例子：傳送門

偽類

例子：傳送門

元素高度知道

例子：傳送門

元素高度不知道

例子：傳送門

flexbox

例子：傳送門

寬度和高度知道(利用垂直居中的塊級元素高度知道)

例子：傳送門

寬度和高度不知道(利用垂直居中的塊級元素高度不知道)

例子：傳送門

flexbox

例子：傳送門

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

github 地址傳送門