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

資訊專欄INFORMATION COLUMN

CSS居中完整版

TIGERB / 1574人閱讀

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

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

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

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

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

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

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

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

代碼鏈接

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

塊級(jí)元素？

對(duì)于塊級(jí)元素，可以通過設(shè)置他的margin屬性為auto來達(dá)到居中的效果。前提是要設(shè)置一個(gè)寬度。如果不設(shè)置寬度的話，默認(rèn)為100%，就用不著居中了。就像這樣：

.center-me {
    margin: 0 auto;
}

代碼鏈接

多個(gè)塊級(jí)元素？

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

代碼鏈接

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

代碼鏈接

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

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

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

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

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

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

代碼鏈接

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

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

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

3、如果前面兩種方法都不起作用，可以使用ghost element方法。在包含塊里放置一個(gè)高度為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;
}

代碼鏈接

塊級(jí)元素
明確元素的高度

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

寬度改變，文字重排，高度會(huì)改變

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

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

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

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

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

代碼鏈接

不確定元素的高度

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

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

代碼鏈接

是否考慮flexbox？

別太驚訝，使用flexbox就太簡(jiǎn)單了

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

代碼鏈接

橫豎都居中

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

元素是否是固定的寬高

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

.parent {
    position: relative;
}

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

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

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

代碼鏈接

不確定元素的寬高？

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

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

代碼鏈接

flexbox

要在flexbox中居中，需要用到兩個(gè)居中屬性：

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

代碼鏈接

總結(jié)

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

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

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

相關(guān)文章

  • 案例 - 收藏集 - 掘金

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

    張金寶 評(píng)論0 收藏0

  • 案例 - 收藏集 - 掘金

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

    huangjinnan 評(píng)論0 收藏0

  • 前端基礎(chǔ)匯總

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

    2json 評(píng)論0 收藏0

  • 前端基礎(chǔ)匯總

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

    laznrbfe 評(píng)論0 收藏0

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

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

    HackerShell 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

TIGERB

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<