让div垂直水平居中的方法

不爱吃糖的程序媛

发布于 2024-01-18 20:18:37

830

发布于 2024-01-18 20:18:37

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

关于如何让div垂直居中这个问题，是初级前端面试被问到的较为基础以及很常见的一道题目，下面我将总结一下让div垂直居中的击中方法。

1.图片展示

2. 首先它分为以下两种情况：

<body>
   <div class="wrap">
      <div class="box">123</div> 
   </div>
</body>

知道宽高的情况下

1.margin：0 auto; (效果为水平居中)

{
  width: 100px;
  height: 100px;
  border: 1px solid #000000;
  margin:0 auto;
}

2.绝对定位，上左为50%，再让上左外边距为: -（实际宽高/2）

.box {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    }

3.绝对定位，上下左右为0，margin为auto（记得后面这一句话很重要！）

.box {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

4.弹性盒子 (这种方法在知不知道宽高都能够实现，只不过父元素不知道宽高的情况下它会是水平居中，但是需要注意的一个点是：把属性写在要求居中的div的父元素中)

.wrap{
    width: 500px;
    height: 500px;
    border: 1px solid #000000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 .box{
  }

5.平移法 (这种方法在知不知道宽高都能够实现，在知道本身div的宽高下它会垂直水平居中，否则是水平居中)

.box {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }

6.利用css3新增属性 display: table; display: table-cell，vertical-aligen: middel

.wrap {
    height: 500px;
    border: 1px solid #000000;
    display: table;
   }
.box {
    border: 1px solid #000000;
    background: pink;
    display: table-cell;
    vertical-align: middle;
  }