在前端設(shè)計(jì)中，經(jīng)常會(huì)有不少的小伙伴們遇到排版方面的問(wèn)題，像是元素居中一類的問(wèn)題。對(duì)于塊級(jí)別元素只需要margin:0 auto就可以解決，對(duì)于行內(nèi)元素text-align:center也能解決，但是如果是不定寬度的塊級(jí)別元素呢？今天文匯軟件小編就來(lái)和大家分享一下這方面的問(wèn)題。

首先我們來(lái)看小編之前遇到的案例，如下圖所示：

像是這里的字如果想要居中一般有三種辦法：

第一種,指定寬度，讓其居中，這里因?yàn)槲覀冞€要做程序調(diào)用，里面字的數(shù)量是不固定的所以直接pass掉；

第二種：使用center標(biāo)簽；但是這里因?yàn)槭怯袃蓚€(gè)不同的字段一個(gè)是發(fā)布人，一個(gè)是發(fā)布時(shí)間，且使用center內(nèi)部不可以再出現(xiàn)其他標(biāo)簽，否則無(wú)法居中，所以這個(gè)也不行。

第三種方法：給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來(lái)實(shí)現(xiàn)水平居中。這樣的好處是既保證了程序可以調(diào)用不同的字段，而且無(wú)論寫(xiě)多少內(nèi)容都會(huì)居中。如下圖：

下圖紅框代表樣式，藍(lán)框代表可以調(diào)取的不同字段。

是不是覺(jué)得小編的分享很使用呢，實(shí)用的話就來(lái)文匯軟件關(guān)注小編吧。