**：
方法一：position加margin
方法二： diaplay:table-cell
方法三：position加 transform
方法四：flex;align-items: center;justify-content: center
方法五：display:flex;margin:auto
方法六：純position
方法七：相容低版本瀏覽器，不固定寬高
總結
這種css布局平時用的比較多，也是面試題常出的乙個題，網上一搜一大丟，不過還是想自己總結一下。
這種方法比較多，本文只總結其中的幾種，以便加深印象。
方法一：position加margin
/**html**/
class="wrap">
class="center">
/**css**/
.wrap
.wrap .center
方法二： diaplay:table-cell
class="wrap">
class="center">
div>
div>
/*css*/
.wrap
.center
方法三：position加 transform
class="wrap">
class="center">
div>
div>
/* css */
.wrap
.center
方法四：flex;align-items: center;justify-content: center
class="wrap">
class="center">
div>
div>
/* css */
.wrap
.center
方法五：display:flex;margin:auto
class="wrap">
class="center">
div>
div>
/* css */
.wrap
.center
方法六：純position
class="wrap">
class="center">
/* 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;*
方法七：相容低版本瀏覽器，不固定寬高
class="table">
class="tablecell">
class="content">不固定寬高，自適應div>
div>
div>
/*css*/
.table
.tablecell
.content
總結 如果是移動端，那麼用方法四和方法五是比較方便的。而且支援不固定寬高的情況，快、準、狠
也就是用 flex; align-items: center; justify-content: center;*
class="wrap">
class="center">
div>
div>
/* css */
.wrap
.center
或者display:flex;margin:auto;
class="wrap">
class="center">
div>
div>
/* css */
.wrap
.center
如果是pc端，要考慮相容性的話。
方法六是不錯滴，也就是純position。
class="wrap">
class="center">
div>
div>
/* css */
.wrap
/**方法一**/
.center
/**方法二**/
.center
七種css方式讓乙個容器水平垂直居中
閱讀目錄 方法一 position加margin 方法二 diaplay table cell 方法三 position加 transform 方法四 flex align items center justify content center 方法五 display flex margin aut...
七種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...