css水平垂直居中的几种方法

251 阅读1分钟

在项目中经常遇到要求一个小盒子相对于另一个大盒子水平垂直居中问题

有以下这些情况

1.小盒子固定宽高(定位方式,脱离文档流)
(1)margin:auto法
<div class="big-box">
   <div class="small-box"></div>
</div>
.big-box {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  background: pink;
  .small-box {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

(2)负margin法
<div class="big-box">
   <div class="small-box"></div>
</div>
.big-box {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  background: pink;
  .small-box {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; /*height的一半*/
    margin-left: -100px; /*width的一半*/
  }
}
(2)table布局法(未脱离文档流)(目前小盒子发现必须是用于行内块级元素,如有理解不对请留言)
<div class="big-box">
  <img src="@/assets/image/p1.png">
</div>
 .big-box {
  width: 400px;
  height: 400px;
  background: pink;
  display: table-cell;
  overflow: hidden;
	text-align: center;
  vertical-align: middle;
  img{
    display: inline-block;
    width: 200px;
    height: 200px;
    vertical-align: middle;
  }
}

2. 小盒子有固定宽高,但是不清楚是多宽多高(css3中的新属性)
<div class="big-box">
   <div class="small-box"></div>
</div>
.big-box {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  background: pink;
  .small-box {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

3. 弹性盒子法
<div class="big-box">
  <img src="@/assets/logo.png" />
</div>
.big-box {
  width: 400px;
  height: 400px;
  background: pink;
  display: flex;
  align-items: center;
  justify-content: center;
}