成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

你所不知道 ? CSS 居中

lewif / 2839人閱讀

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

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

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

github 地址 傳送門
腦圖

水平居中 行內(nèi)元素
display屬性為inline 或者 inline-* 行內(nèi)元素?（例如：文本或者鏈接）

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

.center-children {
    text-align: center;
}
例子：傳送門
單個 - 塊級元素
如果需要使得塊級元素居中，可以利用margin-left和margin-right。
.center-me {
    margin: 0 auto;
}
例子：傳送門
注意：不能是一個浮動的塊級元素哦~
多個 - 塊級元素 - 同行居中
如果需要使得多個塊級元素居中，這個時候用 magin可就不行啦，但是我們可以使用inline-block或者flexbox來實現(xiàn)居中。
inline-block

利用行內(nèi)元素在塊級元素中的居中方法，先讓內(nèi)部的塊級元素變?yōu)樾袃?nèi)元素，再對父級的塊級元素使用居中。

.center-parent {
    text-align: center;
}
.center-parent .center-child{
    display: inline-block;
}
flexbox
.center-parent {
    display: flex;
    justify-content: center;
}
例子：傳送門
多個 - 塊級元素 - 同列居中
利用單個塊級元素的居中方法,來實現(xiàn)多個塊級元素的垂直居中。
.center-me {
    margin: 0 auto;
}
例子：傳送門
垂直居中 單行 - 行內(nèi)元素
display屬性為inline 或者 inline-* 行內(nèi)元素?（例如：文本或者鏈接）。可以利用padding或者line-height來實現(xiàn)。
padding
.text {
    padding-top: 30px;
    padding-bottom: 30px;
}
例子：傳送門
line-height （值和height一樣）
.text {
    height: 100px;
    line-height: 100px;
}
例子：傳送門
多行 - 行內(nèi)元素
對于多行行內(nèi)元素，如果使用單行的方法，在換行之后，會出現(xiàn)錯誤。這個時候可以利用表格的vertical-align或者flexbox或者偽類來實現(xiàn)。
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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111385.html

相關(guān)文章

  • 你所不知道的 CSS 負(fù)值技巧與細(xì)節(jié)

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

    FrozenMap 評論0 收藏0

  • 你所不知道的Python | 字符串格式化的演進(jìn)之路

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

    Blackjun 評論0 收藏0

  • 一些你所不知道的VS Code插件

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

    Near_Li 評論0 收藏0

  • 你所不了解的querySelector

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

    freewolf 評論0 收藏0

  • 你所不知道的同比和環(huán)比真正的區(qū)別

    摘要：給百度百科給的環(huán)比定義為環(huán)比，統(tǒng)計學(xué)術(shù)語，是表示連續(xù)個統(tǒng)計周期比如連續(xù)兩月內(nèi)的量的變化比。二你所不知道的同比環(huán)比兩種方式的核心區(qū)別判斷兩個數(shù)據(jù)到底是同比還是環(huán)比。 ...

    liujs 評論0 收藏0

發(fā)表評論

0條評論

lewif

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<