CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

本篇內(nèi)容介紹了“CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!

成都創(chuàng)新互聯(lián)長(zhǎng)期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為攀枝花企業(yè)提供專(zhuān)業(yè)的做網(wǎng)站、網(wǎng)站設(shè)計(jì),攀枝花網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

Ⅰ.絕對(duì)定位居中(Absolute Centering)技術(shù)

我們經(jīng)常用margin:0 auto來(lái)實(shí)現(xiàn)水平居中,而一直認(rèn)為margin:auto不能實(shí)現(xiàn)垂直居中……實(shí)際上,實(shí)現(xiàn)垂直居中僅需要聲明元素高度和下面的CSS:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

我不是這種實(shí)現(xiàn)方法的第一人,可能這只是非常常見(jiàn)的一種小技術(shù),我斗膽將其命名為絕對(duì)居中(Absolute Centering),雖然如此,但是大多數(shù)討論垂直居中的文章卻從來(lái)不提這種方法,直到我最近瀏覽《How to Center Anything WithCSS》這篇文章的評(píng)論時(shí)候才發(fā)現(xiàn)這種用法。在評(píng)論列表中Simon和Priit都提及了此方法。

如果你有任何擴(kuò)展的功能或建議,可以在此跟帖:

CodePen

SmashingMagazine

Twitter @shshaw

優(yōu)點(diǎn):

1.支持跨瀏覽器,包括IE8-IE10.

2.無(wú)需其他特殊標(biāo)記,CSS代碼量少

3.支持百分比%屬性值和min-/max-屬性

4.只用這一個(gè)類(lèi)可實(shí)現(xiàn)任何內(nèi)容塊居中

5.不論是否設(shè)置padding都可居中(在不使用box-sizing屬性的前提下)

6.內(nèi)容塊可以被重繪。

7.完美支持圖片居中。

缺點(diǎn):

1.必須聲明高度(查看可變高度Variable Height)。

2.建議設(shè)置overflow:auto來(lái)防止內(nèi)容越界溢出。(查看溢出Overflow)。

3.在Windows Phone設(shè)備上不起作用。

瀏覽器兼容性:

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

絕對(duì)定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測(cè)試通過(guò)。

對(duì)比表格:

絕對(duì)居中法并不是唯一的實(shí)現(xiàn)方法,實(shí)現(xiàn)垂直居中還有些其他的方法,并各有各的優(yōu)勢(shì)。采用哪種技術(shù)取決于你的瀏覽器是否支持和你使用的語(yǔ)言標(biāo)記。這個(gè)對(duì)照表有助于你根據(jù)自己的需求做出正確的選擇。

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

解釋

通過(guò)以上描述,絕對(duì)居中(AbsoluteCentering)的工作機(jī)理可以闡述如下:

1、在普通內(nèi)容流(normal content flow)中,margin:auto的效果等同于margin-top:0;margin-bottom:0。

W3C中寫(xiě)道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

2、position:absolute使絕對(duì)定位塊跳出了內(nèi)容流,內(nèi)容流中的其余部分渲染時(shí)絕對(duì)定位部分不進(jìn)行渲染。

Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

3、為塊區(qū)域設(shè)置top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器重新分配一個(gè)邊界框,此時(shí)該塊block將填充其父元素的所有可用空間,父元素一般為body或者聲明為position:relative;的容器。

Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

4、 給內(nèi)容塊設(shè)置一個(gè)高度height或?qū)挾葁idth,能夠防止內(nèi)容塊占據(jù)所有的可用空間,促使瀏覽器根據(jù)新的邊界框重新計(jì)算margin:auto

Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

5、由于內(nèi)容塊被絕對(duì)定位,脫離了正常的內(nèi)容流,瀏覽器會(huì)給margin-top,margin-bottom相同的值,使元素塊在先前定義的邊界內(nèi)居中。

W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

這么看來(lái), margin:auto似乎生來(lái)就是為絕對(duì)居中(Absolute Centering)設(shè)計(jì)的,所以絕對(duì)居中(Absolute Centering)應(yīng)該都兼容符合標(biāo)準(zhǔn)的現(xiàn)代瀏覽器。

簡(jiǎn)而言之(TL;DR):絕對(duì)定位元素不在普通內(nèi)容流中渲染,因此margin:auto可以使內(nèi)容在通過(guò)top: 0; left: 0; bottom: 0;right: 0;設(shè)置的邊界內(nèi)垂直居中。

居中方式:

一、容器內(nèi)(Within Container)

內(nèi)容塊的父容器設(shè)置為position:relative,使用上述絕對(duì)居中方式,可以使內(nèi)容居中顯示于父容器。

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

以下其余的demo默認(rèn)上面的CSS樣式已引用包括進(jìn)去,在此基礎(chǔ)上只提供額外的類(lèi)供用戶追加以實(shí)現(xiàn)不同的功能。

二、視區(qū)內(nèi)(Within Viewport)

想讓內(nèi)容塊一直停留在可視區(qū)域內(nèi)?將內(nèi)容塊設(shè)置為position:fixed;并設(shè)置一個(gè)較大的z-index層疊屬性值。

.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

注意:對(duì)MobileSafari,若內(nèi)容塊不是放在設(shè)置為position:relative;的父容器中,內(nèi)容塊將垂直居中于整個(gè)文檔,而不是可視區(qū)域內(nèi)垂直居中。

三、邊欄 (Offsets)

如果你要設(shè)置一個(gè)固頂?shù)念^或增加其他的邊欄,只需要在內(nèi)容塊的樣式中加入像這樣的CSS樣式代碼:top:70px;bottom:auto;由于已經(jīng)聲明了margin:auto;,該內(nèi)容塊將會(huì)垂直居中于你通過(guò)top,left,bottom和right屬性定義的邊界框內(nèi)。

你可以將內(nèi)容塊固定與屏幕的左側(cè)或右側(cè),并且保持內(nèi)容塊垂直居中。使用right:0;left:auto;固定于屏幕右側(cè),使用left:0;right:auto;固定與屏幕左側(cè)。

.Absolute-Center.is-Right {
  left: auto; right: 20px;
  text-align: right;
}

.Absolute-Center.is-Left {
  right: auto; left: 20px;
  text-align: left;
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

四、響應(yīng)式/自適應(yīng)(Responsive)

絕對(duì)居中最大的優(yōu)勢(shì)應(yīng)該就是對(duì)百分比形式的寬高支持的非常完美。甚至min-width/max-width 和min-height/max-height這些屬性在自適應(yīng)盒子內(nèi)的表現(xiàn)也和預(yù)期很一致。

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

給內(nèi)容塊元素加上padding也不影響內(nèi)容塊元素的絕對(duì)居中實(shí)現(xiàn)。

五、 溢出情況(Overflow)

內(nèi)容高度大于塊元素或容器(視區(qū)viewport或設(shè)為position:relative的父容器)會(huì)溢出,這時(shí)內(nèi)容可能會(huì)顯示到塊與容器的外面,或者被截?cái)喑霈F(xiàn)顯示不全(分別對(duì)應(yīng)內(nèi)容塊overflow屬性設(shè)置為visible和hidden的表現(xiàn))。

加上overflow: auto會(huì)在內(nèi)容高度超過(guò)容器高度的情況下給內(nèi)容塊顯示滾動(dòng)條而不越界。

.Absolute-Center.is-Overflow {
  overflow: auto;
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

如果內(nèi)容塊自身不設(shè)置任何padding的話,可以設(shè)置max-height: 100%;來(lái)保證內(nèi)容高度不超越容器高度。

六、重繪(Resizing)

你可以使用其他class類(lèi)或javascript代碼來(lái)重繪內(nèi)容塊同時(shí)保證居中,無(wú)須手動(dòng)重新計(jì)算中心尺寸。當(dāng)然,你也可以添加resize屬性來(lái)讓用戶拖拽實(shí)現(xiàn)內(nèi)容塊的重繪。

絕對(duì)居中(Absolute Centering)可以保證內(nèi)容塊始終居中,無(wú)論內(nèi)容塊是否重繪。可以通過(guò)設(shè)置min-/max-來(lái)根據(jù)自己需要限制內(nèi)容塊的大小,并防止內(nèi)容溢出窗口/容器。

.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

如果不使用resize:both屬性,可以使用CSS3動(dòng)畫(huà)屬性transition來(lái)實(shí)現(xiàn)重繪的窗口之間平滑的過(guò)渡。一定要設(shè)置overflow:auto;以防重繪的內(nèi)容塊尺寸小于內(nèi)容的實(shí)際尺寸這種情況出現(xiàn)。

絕對(duì)居中(AbsoluteCentering)是唯一支持resize:both屬性實(shí)現(xiàn)垂直居中的技術(shù)。

注意:

  • 要設(shè)置max-width/max-height屬性來(lái)彌補(bǔ)內(nèi)容塊padding,否則可能溢出。

  • 手機(jī)瀏覽器和IE8-IE10瀏覽器不支持resize屬性,所以如果對(duì)你來(lái)說(shuō),這部分用戶體驗(yàn)很必要,務(wù)必保證對(duì)resizing你的用戶有可行的退路。

  • 聯(lián)合使用resize 和 transition屬性會(huì)在用戶重繪時(shí),產(chǎn)生一個(gè)transition動(dòng)畫(huà)延遲時(shí)間。

七、圖片(Images)

絕對(duì)居中(AbsoluteCentering)也適用于圖片。對(duì)圖片自身應(yīng)用class類(lèi)或CSS樣式,并給圖片添加height:auto樣式,圖片會(huì)自適應(yīng)居中顯示,如果外層容器可以resize則隨著容器的重繪,圖片也相應(yīng)重繪,始終保持居中。

需要注意的是height:auto雖然對(duì)圖片居中有用,但如果是在圖片外層的內(nèi)容塊上應(yīng)用了height:auto則會(huì)產(chǎn)生一些問(wèn)題:規(guī)則的內(nèi)容塊會(huì)被拉伸填充整個(gè)容器。這時(shí),我們可以使用可變高度(Variable Height)方式解決這個(gè)問(wèn)題。問(wèn)題的原因可能是渲染圖片時(shí)要計(jì)算圖片高度,這就如同你自己定義了圖片高度一樣,瀏覽器得到了圖片高度就不會(huì)像其他情況一樣去解析margin:auto垂直居中了。所以我們最好對(duì)圖片自身應(yīng)用這些樣式而不是父元素。

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image {
  height: auto;
}

.Absolute-Center.is-Image img { 
  width: 100%;
  height: auto;
}

最好是對(duì)圖片自身應(yīng)用此方法,效果如下圖:

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

八、可變高度(Variable Height)

這種情況下實(shí)現(xiàn)絕對(duì)居中(AbsoluteCentering)必須要聲明一個(gè)高度,不管你是基于百分比的高度還是通過(guò)max-height控制的高度,還有,別忘了設(shè)置合適的overflow屬性。對(duì)自適應(yīng)/響應(yīng)式情景,這種方法很不錯(cuò)。

與聲明高度效果相同的另一種方法是設(shè)置display:table;這樣無(wú)論實(shí)際內(nèi)容有多高,內(nèi)容塊都會(huì)保持居中。這種方法在一些瀏覽器(如IE/FireFox)上會(huì)有問(wèn)題,我的搭檔Kalley

在ELL Creative(訪問(wèn)ellcreative.com )上寫(xiě)了一個(gè)基于Modernizr插件的檢測(cè)函數(shù),用來(lái)檢測(cè)瀏覽器是否支持這種居中方法,進(jìn)一步增強(qiáng)用戶體驗(yàn)。

Javascript:

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});

CSS:

.absolutecentercontent .Absolute-Center.is-Variable {
  display: table;
  height: auto;
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

缺點(diǎn):

瀏覽器兼容性不太好,若Modernizr不能滿足你的需求,你需要尋找其他方法解決。

1.與上述重繪(Resizing)情況的方法不兼容

2.Firefox/IE8:使用display:table會(huì)使內(nèi)容塊垂直居上,不過(guò)水平還是居中的。

3.IE9/10: 使用display:table會(huì)使內(nèi)容塊顯示在容器左上角。

4.Mobile Safari:內(nèi)容塊垂直居中;若使用百分比寬度,水平方向居中會(huì)稍微偏離中心位置。

Ⅱ.其他居中實(shí)現(xiàn)技術(shù)

絕對(duì)居中(Absolute Centering)是一種非常不錯(cuò)的技術(shù),除此之外還有一些方法可以滿足更多的具體需求,最常見(jiàn)的推薦:NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出現(xiàn)的Flexbox.方式。這些方法許多文章都有深入講解,這里只做簡(jiǎn)單闡述。

九、負(fù)外邊距(Negative Margins)

這或許是當(dāng)前最流行的使用方法。如果塊元素尺寸已知,可以通過(guò)以下方式讓內(nèi)容塊居中于容器顯示:

外邊距margin取負(fù)數(shù),大小為width/height(不使用box-sizing: border-box時(shí)包括padding,)的一半,再加上top: 50%; left: 50%;。即:

.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

測(cè)試表明,這是唯一在IE6-IE7上也表現(xiàn)良好的方法。

優(yōu)點(diǎn):

1.良好的跨瀏覽器特性,兼容IE6-IE7。

2.代碼量少。

缺點(diǎn):

1.不能自適應(yīng)。不支持百分比尺寸和min-/max-屬性設(shè)置。

2.內(nèi)容可能溢出容器。

3.邊距大小與padding,和是否定義box-sizing: border-box有關(guān),計(jì)算需要根據(jù)不同情況。

十、變形(Transforms)

這是最簡(jiǎn)單的方法,不近能實(shí)現(xiàn)絕對(duì)居中同樣的效果,也支持聯(lián)合可變高度方式使用。內(nèi)容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的前綴,還要加上

top: 50%; left: 50%;

代碼類(lèi):

.is-Transformed { 
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

優(yōu)點(diǎn):

1.內(nèi)容可變高度

2.代碼量少

缺點(diǎn):

1.IE8不支持

2.屬性需要寫(xiě)瀏覽器廠商前綴

3.可能干擾其他transform效果

4.某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象

進(jìn)一步了解transform實(shí)現(xiàn)居中的知識(shí)可以參考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

十一、表格單元格(Table-Cell)

總的說(shuō)來(lái)這可能是最好的居中實(shí)現(xiàn)方法,因?yàn)閮?nèi)容塊高度會(huì)隨著實(shí)際內(nèi)容的高度變化,瀏覽器對(duì)此的兼容性也好。最大的缺點(diǎn)是需要大量額外的標(biāo)記,需要三層元素讓最內(nèi)層的元素居中。

HTML:

<p class="Center-Container is-Table">
  <p class="Table-Cell">
    <p class="Center-Block">
    <!-- CONTENT -->
    </p>
  </p>
</p>

CSS:

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

優(yōu)點(diǎn):

1.高度可變

2.內(nèi)容溢出會(huì)將父元素?fù)伍_(kāi)。

3.跨瀏覽器兼容性好。

缺點(diǎn):

需要額外html標(biāo)記

了解更多表格單元格實(shí)現(xiàn)居中的知識(shí),請(qǐng)參考Roger Johansson發(fā)表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》

十二、行內(nèi)塊元素(Inline-Block)

很受歡迎的一種居中實(shí)現(xiàn)方式,基本思想是使用display: inline-block, vertical-align: middle和一個(gè)偽元素讓內(nèi)容塊處于容器中央。這個(gè)概念的解釋可以參考CSS-Tricks上的文章《Centering in the Unknown》

我這個(gè)例子也有一些其他地方見(jiàn)不到的小技巧,有助于解決一些小問(wèn)題。

如果內(nèi)容塊寬度大于容器寬度,比如放了一個(gè)很長(zhǎng)的文本,但內(nèi)容塊寬度設(shè)置最大不能超過(guò)容器的100%減去0.25em,否則使用偽元素:after內(nèi)容塊會(huì)被擠到容器頂部,使用:before內(nèi)容塊會(huì)向下偏移100%。

如果你的內(nèi)容塊需要占據(jù)盡可能多的水平空間,可以使用max-width: 99%;(針對(duì)較大的容器)或max-width: calc(100% -0.25em)(取決于支持的瀏覽器和容器寬度)。

HTML:

<p class="Center-Container is-Inline">
  <p class="Center-Block">
    <!-- CONTENT -->
  </p>
</p>

CSS:

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

這種方法的優(yōu)劣和單元格Table-Cell方式差不多,起初我把這種方式忽略掉了,因?yàn)檫@確實(shí)是一種hack方法。不過(guò),無(wú)論如何,這是很流行的一種用法,瀏覽器支持的也很好。

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

優(yōu)點(diǎn):

1.高度可變

2.內(nèi)容溢出會(huì)將父元素?fù)伍_(kāi)。

3.支持跨瀏覽器,也適應(yīng)于IE7。

缺點(diǎn):

1.需要一個(gè)容器

2.水平居中依賴(lài)于margin-left: -0.25em;該尺寸對(duì)于不同的字體/字號(hào)需要調(diào)整。

3.內(nèi)容塊寬度不能超過(guò)容器的100% - 0.25em。

更多相關(guān)知識(shí)參考ChrisCoyier的文章《Centeringin the Unknown》

十三、Flexbox

這是CSS布局未來(lái)的趨勢(shì)。Flexbox是CSS3新增屬性,設(shè)計(jì)初衷是為了解決像垂直居中這樣的常見(jiàn)布局問(wèn)題。相關(guān)的文章如《Centering Elements with Flexbox》

記住Flexbox不只是用于居中,也可以分欄或者解決一些令人抓狂的布局問(wèn)題。

CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)

優(yōu)點(diǎn):

1.內(nèi)容塊的寬高任意,優(yōu)雅的溢出。

2.可用于更復(fù)雜高級(jí)的布局技術(shù)中。

缺點(diǎn):

1.IE8/IE9不支持。

2.Body需要特定的容器和CSS樣式。

3.運(yùn)行于現(xiàn)代瀏覽器上的代碼需要瀏覽器廠商前綴。

4.表現(xiàn)上可能會(huì)有一些問(wèn)題

有關(guān)Flexbox Centering的文章可以參考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》

建議:

每種技術(shù)都有其優(yōu)劣之處。你選擇哪一種技術(shù)取決于支持的瀏覽器和你的編碼。使用上面的對(duì)照表有助于你做出決定。

作為一種簡(jiǎn)單的替代方案,絕對(duì)居中(Absolute Centering)技術(shù)表現(xiàn)良好。曾經(jīng)你使用負(fù)邊距(Negative Margins)的地方,現(xiàn)在可以用絕對(duì)居中(Absolute Centering)替代了。你不再需要處理討厭的邊距計(jì)算和額外的標(biāo)記,而且還能讓內(nèi)容塊自適應(yīng)大小居中。

如果你的站點(diǎn)需要可變高度的內(nèi)容,可以試試單元格(Table-Cell)和行內(nèi)塊元素(Inline-Block)這兩種方法。如果你處在流血的邊緣,試試Flexbox,體驗(yàn)一下這一高級(jí)布局技術(shù)的好處吧。

“CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!

文章名稱(chēng):CSS如何實(shí)現(xiàn)水平垂直居中的絕對(duì)定位居中技術(shù)
當(dāng)前URL:http://muchs.cn/article14/ghsede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、ChatGPT建站公司、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)