常见的css 实现水平垂直居中方法有哪些？（附10种）

十种方法实现水平垂直居中

效果：

这里:left:50%是相对于父元素的50%,并且是从左上角开始算的

这里：-margin是相对于子元素自身的

需要居中元素固定宽高的3种

法1：absolute配合负margin

法2：absolute配合上下左右0；margin auoto

法3：absolute配合calc(50% - 25px)，注意calc空格

html

  <div class='wp'>父亲
      <div class='box'>儿子</div>
  </div>

css

.wp{
   
  border:1px solid red;
  height:400px;
  position:relative

}
.box{
   
  border:1px solid green;
  height:200px;
  width:50px;
}

/* 法1：absolute配合负margin
.box{
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-25px;
 margin-top:-100px
} */


/* 法2：absolute配合上下左右0；margin auoto
.box{
 position:absolute;
 left:0;
 top:0;
 right:0;
 bottom:0;
 margin:auto
} */

/* 法3:absolute配合calc(50% - 25px)，注意calc空格
.box{
 position:absolute;
 top:calc(50% - 100px);
 left:calc(50% - 25px)
} */

不用居中元素固定宽高的7种

• absolute+transform
• flex