盒子如何垂直水平居中方法

[xiongbofan]

盒子垂直水平居中方法:
1、

.box{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

2、使用定位垂直水平居中:负margin居中（传统方法）
子绝父相

.father{
  position:relative;
  width:300px;
  height:300px;
}
.son{
  position: absolute;
  width:100px;
  height:100px;
  left:50%;
  top:50%
  margin-left: -50%;
  margin-top: -50%;
}

3.transform居中方法

.box {
  width: 100px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

个人觉得比较好用的垂直居中方法,还是定位和transform粗体字

[loveme199]

直接用flex更好

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

[xiongbofan]

@loveme199 ok

[yashugongshang]

@xiongbofan 学到老，活到老