閱讀目錄
方法一：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
方法二： diaplay:table-cell
div>
div>
/*css*/
.wrap
.center
方法三：position加 transform
div>
div>
/* css */
.wrap
.center
方法四：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
div>
div>
/* css */
.wrap
.center
div>
div>
/* css */
.wrap
/**方法一**/
.center
/**方法二**/
.center
這種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...