七種css方式讓乙個容器水平垂直居中

2022-09-01 03:45:10 字數 2848 閱讀 1308

閱讀目錄

方法一:position加margin 

方法二: diaplay:table-cell 

方法三:position加 transform 

方法四:flex;align-items: center;justify-content: center 

方法五:display:flex;margin:auto 

方法六:純position 

方法七:相容低版本瀏覽器,不固定寬高

總結這種css布局平時用的比較多,也是面試題常出的乙個題,網上一搜一大丟,不過還是想自己總結一下。

這種方法比較多,本文只總結其中的幾種,以便加深印象。

效果圖都為這個:

方法一:position加margin

div>

div>

/**css**/

.wrap

.wrap .center

相容性:主流瀏覽器均支援,ie6不支援

方法二: diaplay:table-cell

div>

div>

/*css*/

.wrap

.center

相容性:由於display:table-cell的原因,ie6\7不相容

方法三:position加 transform

div>

div>

/* css */

.wrap

.center

相容性:ie9以下不支援 transform,手機端表現的比較好。

方法四:flex;align-items: center;justify-content: center

div>

div>

/* css */

.wrap

.center

移動端首選

方法五:display:flex;margin:auto

div>

div>

/* css */

.wrap

.center

移動端首選

方法六:純position

div>

div>

/* css */

.wrap

/**方法一**/

.center

/**方法二**/

.center

相容性:適用於所有瀏覽器

方法六中的方法一計算公式如下:

子元素(conter)的left值計算公式:left=(父元素的寬 - 子元素的寬 ) / 2=(200-100) / 2=50px; 

子元素(conter)的top值計算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;

方法二計算公式: 

left值固定為50%; 

子元素的margin-left= -(子元素的寬/2)=-100/2= -50px; 

top值也一樣,固定為50%

子元素的margin-top= -(子元素的高/2)=-100/2= -50px;

方法七:相容低版本瀏覽器,不固定寬高

不固定寬高,自適應div>

div>

div>

/*css*/

.table

.tablecell

.content

暫時總結上面的七種,這種方法太多,其實只要習慣了其中的一兩種也就夠用了。

總結如果是移動端,那麼用方法四和方法五是比較方便的。而且支援不固定寬高的情況,快、準、狠

也就是用 flex; align-items: center; justify-content: center;

div>

div>

/* css */

.wrap

.center

或者display:flex;margin:auto;

div>

div>

/* css */

.wrap

.center

如果是pc端,要考慮相容性的話。方法六是不錯滴,也就是純position。

div>

div>

/* css */

.wrap

/**方法一**/

.center

/**方法二**/

.center

如果pc端的中間的元素高度不固定,那麼就用方法七即可,**就不複製了

這種css元素垂直的如果真的要總結起來,應該有十幾二十幾種。不過也沒必要全部掌握吧,只要大概了解一些,用起來沒有***就行。

七種CSS方式讓乙個容器水平垂直居中

方法一 position加margin 方法二 diaplay table cell 方法三 position加 transform 方法四 flex align items center justify content center 方法五 display flex margin auto 方法六...

七種css方式讓乙個容器水平垂直居中

閱讀目錄 方法一 position加margin 方法二 diaplay table cell 方法三 position加 transform 方法四 flex align items center justify content center 方法五 display flex margin aut...

css 方式讓乙個容器水平垂直居中

div.center div.center img paddingmargin topmargin bottomdiv.center div.center imgdisplay blockmargin 0 autoimg table.center aligned center core center...