10種水平垂直居中的方法

方法 居中元素定寬高固定
absolute + 負(fù)margin
absolute + margin auto
absolute + calc
absolute + transform no
writing-mode no
lineheight no
table no
css-table no
flex no
grid no

公共代碼

/* 公共代碼 */
.parent{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
.child{
    background: green;
}
.child.size{
    width: 200px;
    height: 200px;
}
/* 公共代碼 */

absolute + 負(fù)margin

absolute + 負(fù)margin DEMO

絕對定位的百分比是相對于父元素的寬高尼摹,通過這個特性可以讓子元素的居中顯示,但是絕對定位是基于子元素的左上角溅固,期望的效果是子元素的中心居中顯示跌榔,

為了解決這個問題,可以借助外邊距的負(fù)值另假,負(fù)的外邊距可以讓元素向相反方向定位,通過指定子元素的外邊距為子元素寬度一半的負(fù)值资铡,就可以讓子元素居中了电禀,代碼如下:

HTML代碼

<div class="parent">
    <div class="child size">hhhhh</div>
</div>
/* 引用公共代碼 */

/* 定位代碼 */
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

缺點是需要知道子元素的寬高

absolute + margin auto

absolute + margin auto DEMO

這種方式要求居中元素的寬高固定

這種方式通過設(shè)置各個方向的距離都是0,此時再將margin設(shè)置為auto笤休,就可以各個方向上居中

HTML代碼

<div class="parent">
    <div class="child size">hhhhh</div>
</div>

CSS代碼如下:

/* 引用公共代碼 */

/* 定位代碼 */
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

缺點: 需要知道子元素的寬高

absolute + calc

absolute+calc DEMO

CSS3有了計算屬性尖飞,top的百分比是基于元素的左上角,那么再減去寬度的一半就好了店雅,

HTML代碼

<div class="parent">
    <div class="child size">hhhhh</div>
</div>

CSS代碼如下:

/* 引用公共代碼 */

/* 定位代碼 */
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

依賴calc的兼容性政基,缺點是需要知道子元素的寬高

<span id="at"></span>

absolute + transform

absolute+transform DEMO

還是絕對定位,但不需要子元素固定寬高闹啦,所以不需要size類

HTML:

<div class="parent">
    <div class="child">hhh</div>
</div>

修復(fù)絕對定位的問題沮明,可以使用css3新增的transform,transform的translate屬性可以設(shè)置百分比窍奋,相對于自身的寬和高荐健,講translate設(shè)置為50%,就可以居中了

CSS:

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

writing-mode

writing-mode DEMO

writing-mode可以改變文字的顯示方向琳袄,

HTML:

<div class="child1">水平方向</div>
<div class="child2">垂直方向</div>

CSS:

.child2{
    writing-mode: vertical-lr;
}

顯示效果:

水平方向
垂
直
方
向

所有水平方向上的CSS屬性江场,都會變?yōu)榇怪毕蛏系膶傩裕热?=text-align==窖逗,通過==writing-mode==和==text-align==就可以做到水平和垂直方向居中

HTML:

<div class="parent">'
    <div class="parent-inner">
        <div class="child">hhhh</div>
    </div>
</div>

CSS:

.parent{
    writing-mode: vertical-lr;
    text-align: center;
}
.parent-inner{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.child{
    display: inline-block;
    margin: auto;
    text-align: left;
}

lineheight

lineheight DEMO

利用行內(nèi)元素居中屬性可以做到水平垂直居中址否,

HTML:

<div class="parent">
    <div class="child">hhhhh</div>
</div>

把child設(shè)置為行內(nèi)元素,通過==text-align==就可以做到水平居中碎紊,還可以通過==vertical-align==在垂直方向做到居中

CSS:

.parent{
    line-height: 400px;
    text-align: center;
    font-size: 0px;
}
.child{
    font-size: 16px;
    display: inline-block;]
    vertical-align: middle;
    line-height: initial;
    text-align: left;
}

table

table DEMO
table也能實現(xiàn)水平垂直居中佑附,但會增加很多冗余代碼

HTML:

<table>
    <tbody>
        <tr>
            <td class="parent">
                <div class="child">hhhhh</div>
            </td>
        </tr>
    </tbody>
</table>

CSS:

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

代碼太冗余,而且不是table的正確用法

css-table

css-table DEMO

css新增的table屬性仗考,可以讓我們把普通元素帮匾,變?yōu)閠able元素的顯示效果,通過這個特性也可以實現(xiàn)水平垂直居中

HTML:

<div class="parent">
    <div class="child">hhhhhh</div>
</div>

通過CSS屬性痴鳄,可以讓div顯示得和table一樣

CSS:

.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

flex

flex DEMO

flex一個現(xiàn)代的布局方案,幾行代碼就可以水平垂直居中了

HTML:

<div class="parent">
    <div class="child">hhhhhh</div>
</div>

CSS:

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

grid

grid DEMO

css新出的網(wǎng)格布局缸夹,直接上代碼痪寻,

HTML:

<div class="parent">
    <div class="child">hhhhhh</div>
</div>

CSS:

.parent{
    display: grid;
}
.child{
    align-self: center;
    justify-self: center;
}

總結(jié)

  • PC端有兼容性要求,寬高固定虽惭,推薦absolute + 負(fù)margin
  • PC端有兼容要求橡类,寬高不固定,推薦css-table
  • PC端無兼容性要求芽唇,推薦flex
  • 移動端推薦使用flex
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末顾画,一起剝皮案震驚了整個濱河市取劫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌研侣,老刑警劉巖谱邪,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異庶诡,居然都是意外死亡惦银,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門末誓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扯俱,“玉大人,你說我怎么就攤上這事喇澡⊙刚ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵晴玖,是天一觀的道長读存。 經(jīng)常有香客問我,道長窜醉,這世上最難降的妖魔是什么宪萄? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮榨惰,結(jié)果婚禮上拜英,老公的妹妹穿的比我還像新娘。我一直安慰自己琅催,他們只是感情好居凶,可當(dāng)我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著藤抡,像睡著了一般侠碧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缠黍,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天弄兜,我揣著相機與錄音,去河邊找鬼瓷式。 笑死替饿,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贸典。 我是一名探鬼主播视卢,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼廊驼!你這毒婦竟也來了据过?” 一聲冷哼從身側(cè)響起惋砂,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎绳锅,沒想到半個月后西饵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡榨呆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年罗标,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片积蜻。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡闯割,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出竿拆,到底是詐尸還是另有隱情宙拉,我是刑警寧澤,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布丙笋,位于F島的核電站谢澈,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏御板。R本人自食惡果不足惜锥忿,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望怠肋。 院中可真熱鬧敬鬓,春花似錦、人聲如沸笙各。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杈抢。三九已至数尿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間惶楼,已是汗流浹背右蹦。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留歼捐,地道東北人何陆。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像窥岩,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子宰缤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案颂翼? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,751評論 1 92
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,172評論 3 30
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5晃洒? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,475評論 1 45
  • 臭臭美女子閱讀 279評論 0 0
  • 日子一天天過去朦乏,轉(zhuǎn)眼間球及,11月將至,我卻懶惰地逃避諸多事情呻疹。哎呀呀吃引,成功人士不容易啊刽锤!
    恭華閱讀 154評論 0 0