web前端的居中方法总结

前言：完整代码链接

---

     我已经把完整代码放在 居中代码 。

---

一、利用flex弹性布局进行居中

 1、flex居中原理

    首先你得去百度理解flex布局的相关概念。felx布局中有两个轴，一个主轴，一个交叉轴。主轴默认为水平横轴，交叉轴就是和主轴垂直的那个轴。我们设置主轴方向上的对齐方式为center，交叉轴方向上的对齐方式为center，那么就是垂直居中对齐了。

 2、代码

html代码：

 <div class="box flex-center">
    <div></div>
  </div>

css代码居中代码，写在盒子上：

.box{   /*box为居中元素所在的盒子*/
  display:flex;
  justify-content:center;
  align-items:center;
}
.flex-center div{
  background-color:red;
}

盒子的样式代码：

.box{
  width: 15rem;
  height: 15rem;
  padding: 1.4rem;
   border: 0.25rem dashed white;
  border-radius: 1rem;
}
.box div{
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;/*正方形圆角*/
}

  效果如图：
)

二、绝对位置居中

 1.绝对位置居中的原理

    这个原理简单，就是先把元素（.box里的元素）变为定位元素

  position:absolute;

    然后上下左右偏移为0，margin设为auto,他就会自动改变margin的值，自动居中了。

 2.代码

html代码如下：

<div class="box absolute-center">
    <div></div>
</div>

css代码如下（居中代码写在元素上）：

.box{          /* 先画一个盒子，用白色虚线框起来*/
  width: 15rem;
  height: 15rem;
  padding: 1.4rem;
   border: 0.25rem dashed white;
  border-radius: 1rem;
}

             /*----------绝对定位居中的代码----------*/
.absolute-center{
  position:relative;    /*注意，这个绝对不能少*/
}
.absolute-center div{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background-color:blue;
}

效果如图: