水平垂直居中

发布时间：2020-12-15 05:32:54 所属栏目：Java 来源：网络整理

导读：实现水平垂直居中的方法有很多，在这里我只介绍两种易用且常见的方法，这两种方法对于固定宽高和不定宽高都有效。 1、transform 方案 // html部分 div class = " container " div class = " box " box/div/div // css部分 .container{ position: relative; w

实现水平垂直居中的方法有很多，在这里我只介绍两种易用且常见的方法，这两种方法对于固定宽高和不定宽高都有效。

1、transform 方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>

// css部分
.container{
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

2、flexbox 方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>

// css部分
.container{
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;            // 设置flex
  justify-content: center;  // 主轴居中
  align-items: center;      // 交叉轴居中
}
.box{
  
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!