让div垂直水平居中的方法

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

1.图片展示

让div垂直水平居中的方法_第1张图片

2. 首先它分为以下两种情况:
<body>
   <div class="wrap">
      <div class="box">123div> 
   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;
  }
不知道宽高的情况下

上面的4,5,,6方法都可以

目前见到的比较常用的就是这几种方法,还知道方法的童鞋可以在下面留言或者私聊我,哈哈哈欢迎一起讨论学习。
让div垂直水平居中的方法_第2张图片

你可能感兴趣的:(CSS3,div垂直居中的方法,盒子垂直居中,css垂直居中)