CSS 居中完全指南

hqman 發(fā)布于2019-08-30 13:03 / 1634人閱讀

摘要：在文本前面插入一個(gè)高度為百分百的偽元素，讓文本與其垂直對(duì)齊。塊級(jí)元素或者使用垂直水平居中或者使用

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

預(yù)先給出這樣的樣式

水平居中 子元素為 inline 或者 inline-* 元素（例如 text 或者 links)

使用 text-align: center; 的方法

子元素為 block 元素

使用 margin: 0 auto; 的方法

有多個(gè) block 元素

如果你有兩個(gè)或更多的 block-level 元素需要在一行內(nèi)居中

方法一：
改變 display 的類型為 inline-block

方法二：
使用 flexbox

垂直居中 子元素為 inline 或者 inline-* 元素（例如 text 或者 links) 只有一行文本

一個(gè)小技巧是將 height 與 line-height 設(shè)置為相同的值


  center

有多行文本

可以嘗試將父元素的 display 設(shè)置為 table ，同時(shí)設(shè)置該元素的 display 為 table-cell，然后設(shè)置vertical-align: middle


  I"m vertically centered multiple lines of text in a CSS-created table layout.

或者實(shí)際的將其放入 table 中


  
    
      I"m vertically centered multiple lines of text in a real table cell.

或者使用 flexbox


  I"m vertically centered multiple lines of text in a flexbox container.

如果上面的方法都不起作用的話，可以使用一個(gè)幽靈元素。在文本前面插入一個(gè)高度為百分百的偽元素，讓文本與其垂直對(duì)齊。


  I"m vertically centered multiple lines of text in a flexbox container.

塊級(jí)元素

或者使用 flexbox

垂直 & 水平居中

或者使用 flexbox

GPU云服務(wù)器云服務(wù)器 html完全居中 html居中css css權(quán)威指南完全

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

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

相關(guān)文章

CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

cc17 2019-08-02 10:11 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

AlienZHOU 2019-08-30 15:53 評(píng)論0 收藏0
CSS居中完全指南

摘要：原載于，本文著重提取文中的方法，不完全翻譯。人們經(jīng)常抱怨在中居中元素的問(wèn)題，其實(shí)這個(gè)問(wèn)題其實(shí)并不復(fù)雜，只是因?yàn)榉椒ū姸?，需要根?jù)情況從眾多方法中選取一個(gè)出來(lái)。原載于CSS-Trick，本文著重提取文中的方法，不完全翻譯。如有需要，直接原文查看。人們經(jīng)常抱怨在CSS中居中元素的問(wèn)題，其實(shí)這個(gè)問(wèn)題其實(shí)并不復(fù)雜，只是因?yàn)榉椒ū姸啵枰鶕?jù)情況從眾多方法中選取一個(gè)出來(lái)。接下來(lái)，我們做一個(gè)‘...

qujian 2019-08-30 12:47 評(píng)論0 收藏0
朝花夕拾：CSS居中完全指南

摘要：正文居中是常被開(kāi)發(fā)者抱怨的問(wèn)題之一。注意你不能將浮動(dòng)元素居中。水平且垂直居中你可以將前面的方法任意組合起來(lái)，實(shí)現(xiàn)完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果沒(méi)有接...

laznrbfe 2019-08-29 13:45 評(píng)論0 收藏0
居中的css:完全指南(翻譯)

摘要：水平水平居中有行內(nèi)元素和塊元素，行內(nèi)元素有文字圖片鏈接等塊元素主要是等元素。塊元素對(duì)于一個(gè)塊元素，可以設(shè)置其和自動(dòng)，就像這樣在線查看無(wú)論塊元素的寬度是否已知，都可以實(shí)現(xiàn)水平居中。這里主要參考的是CHRIS COYIER寫的一篇的文章(點(diǎn)擊查看)，主要講了關(guān)于css水平、垂直居中的一些方法,每個(gè)方法后面都有一個(gè)demo，可以在線查看效果。 1 水平水平居中有行內(nèi)元素和塊元素，行內(nèi)元素...

Integ 2019-08-30 12:54 評(píng)論0 收藏0