国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS居中完整版

TIGERB / 1588人閱讀

摘要：塊級元素對于塊級元素，可以通過設置他的屬性為來達到居中的效果。與其它情況不同，這個是用來處理一行內(nèi)的元素居中的。在包含塊里放置一個高度為的偽元素，這樣，文本就居中了。

翻譯自https://css-tricks.com/centering-css-com...

我將原作者的代碼整理成了Github Repo，并且在持續(xù)更新使用CSS居中的方法，歡迎fork和star我的項目css-center-complete。

大家總是會抱怨如何在CSS中居中一個元素。為什么會這么難呢？呵呵(使用這個來詞翻譯再好不過了)。我認為問題不在有多難，而是居中在不同的場景中有那么多種方式，很難抉擇到底該使用哪一種。

所以，我們把這些選擇做成一棵樹狀，希望使用起來更簡單吧。

橫向居中 是行內(nèi)元素或者行內(nèi)塊級元素？(inline 或者 inline-block)

你可以將行內(nèi)元素居中在塊級元素中，就像這樣：

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

代碼鏈接

這個方法對于display屬性為inline, inline-block, inline-table, inline-flex等的元素都有作用。

塊級元素？

對于塊級元素，可以通過設置他的margin屬性為auto來達到居中的效果。前提是要設置一個寬度。如果不設置寬度的話，默認為100%，就用不著居中了。就像這樣：

.center-me {
    margin: 0 auto;
}

代碼鏈接

多個塊級元素？

如果需要在一行中居中兩個及以上的塊級元素，最好給他們設置display屬性為inline-block。下面這個例子是在flexbox中給他們設置display: inline-block;的：

代碼鏈接

除非你是想多個塊級元素都在各自的頂部，如果是這樣的話，那么使用amrgin: 0 auto；也可以；

代碼鏈接

垂直居中 行內(nèi)元素或者行內(nèi)塊級元素？(inline 或者 inline-block)
多帶帶一行

有的時候行內(nèi)元素很明顯可以垂直居中。只需要設置它們的上下padding值相等：

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

如果設置padding不行，而且你想居中的是文本的話，那么，可以設置文本的line-height與元素的height相等。

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

1、相等的padding對多行的情況也適用。如果不起作用的話，那么這個元素或者文本的display屬性可能是table-cell。這種情況下，vertical-align就有作用了。與其它情況不同，這個是用來處理一行內(nèi)的元素居中的。

代碼鏈接

2、如果類表格元素的居中不起作用，那么是否考慮使用flexbox？在flexbox的父元素中居中flexbox子元素就太簡單了。

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

記住只有父級元素有固定的高度，這樣寫才有意義。

3、如果前面兩種方法都不起作用，可以使用ghost element方法。在包含塊里放置一個高度為100%的偽元素，這樣，文本就居中了。

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

代碼鏈接

塊級元素
明確元素的高度

不知道網(wǎng)頁布局的高度簡直是太習以為常的事情了。各種情況都會出現(xiàn)：

寬度改變，文字重排，高度會改變

不同的文字樣式的高度也不一樣

不同文本的數(shù)量的高度也不一樣

固定比例的元素，比如圖片啥的，在改變尺寸的時候也會改變高度等等

但是如果你知道元素的高度就好辦了：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px; 
    /* 如果沒有使用border-box的話就只需要關(guān)心padding和border了 */
}

代碼鏈接

不確定元素的高度

不知道元素高度的情況下，通過先將他往下移動50%，然后再向上移動他的高度的一半來居中也還是有可能的。

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

代碼鏈接

是否考慮flexbox？

別太驚訝，使用flexbox就太簡單了

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

代碼鏈接

橫豎都居中

你完全可以用各種方式將上面的技術(shù)結(jié)合起來達到完美居中的效果。但我覺得可以把這些情況分為下面三種：

元素是否是固定的寬高

在使用絕對定位分別設置上下50％和左右50％之后，使用分別等于寬高一半的負邊距就能夠跨瀏覽器實現(xiàn)完全居中了：

.parent {
    position: relative;
}

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

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

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

代碼鏈接

不確定元素的寬高？

如果不知道元素的寬高，那么可以使用transform屬性在兩個不同的方向上設置-50%(基于當前元素的寬高)來居中：

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

代碼鏈接

flexbox

要在flexbox中居中，需要用到兩個居中屬性：

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

代碼鏈接

總結(jié)

經(jīng)過上面這些方法，我們完全可以使用CSS來達到完美的居中。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115164.html

相關(guān)文章

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實現(xiàn)圓形進度條前端掘金在開發(fā)微信小程序的時候，遇到圓形進度條的需求。實現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個老生常談的話題了。百度前端技術(shù)學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業(yè)加入美團，相信技術(shù)，更相信技術(shù)只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

    張金寶 評論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實現(xiàn)圓形進度條前端掘金在開發(fā)微信小程序的時候，遇到圓形進度條的需求。實現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個老生常談的話題了。百度前端技術(shù)學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業(yè)加入美團，相信技術(shù)，更相信技術(shù)只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

    huangjinnan 評論0 收藏0

  • 前端基礎匯總

    摘要：及相關(guān)問題數(shù)據(jù)類型函數(shù)中指向原型作用域閉包面向?qū)ο髮ο髣?chuàng)建模式繼承嚴格模式與對象轉(zhuǎn)換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構(gòu)賦值簡化對象寫法剪頭函數(shù)三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實現(xiàn) js及es相關(guān)問題 數(shù)據(jù)類型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮ο髣?chuàng)建模式繼承——————Es5嚴格模式Json與j...

    2json 評論0 收藏0

  • 前端基礎匯總

    摘要：及相關(guān)問題數(shù)據(jù)類型函數(shù)中指向原型作用域閉包面向?qū)ο髮ο髣?chuàng)建模式繼承嚴格模式與對象轉(zhuǎn)換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構(gòu)賦值簡化對象寫法剪頭函數(shù)三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實現(xiàn) js及es相關(guān)問題 數(shù)據(jù)類型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮ο髣?chuàng)建模式繼承——————Es5嚴格模式Json與j...

    laznrbfe 評論0 收藏0

  • 一些面試時關(guān)于 CSS 的問題

    摘要：可以試試去掉的會發(fā)生很奇妙的事呢附加關(guān)于子元素設置為而引發(fā)的問題。附加關(guān)于開啟硬件加速提升網(wǎng)站動畫渲染性能問題。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 1. 水平垂直居中問題 這可以說是最經(jīng)典的問題了，水平垂直居中，這個問題從入門前端一直到面試，甚至到工作之后都會時不時遇到，最近的面試也被問過這之類的問題，這里還是好好總結(jié)一番，以作備忘。公用 HTML 部分： ...

    HackerShell 評論0 收藏0

發(fā)表評論

0條評論

TIGERB

男|高級講師

TA的文章

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