4种CSS实现div水平垂直居中的方法

  1. 利用绝对定位:先离开左、上50%,然后再向左、上移动半个盒子的宽和长。
.father1 {
   position: relative;
}
.son1 {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -50px;
   margin-top: -50px;
   background-color: aqua;
}
  1. margin:auto
 .father2 {
   position: relative;
 }
 .son2 {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   background-color: hotpink;
 }
  1. 弹性盒子
.father3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.son3 {
  background-color: green;
}
  1. 利用display:table-cell;然后设置vertical-align:middle。
.father4 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.son4 {
  display: inline-block;
  background-color: yellow;
}

HTML结构和样式

 <style>
 	section {
        height: 300px;
        width: 300px;
        border: 1px solid pink;
      }
      div {
        width: 100px;
        height: 100px;
      }
</style>
<body>
  <section class="father1">
    <div class="son1">1</div>
  </section>
  <section class="father2">
    <div class="son2">2</div>
  </section>
  <section class="father3">
    <div class="son3">3</div>
  </section>
  <section class="father4">
    <div class="son4">4</div>
  </section>
</body>
上一篇:flex布局说明


下一篇:flex布局