元素居中的几种方法

    当我们进行前端开发时，居中是应用非常广泛的样式，出于中国人中庸的思想，居中的样式可以使人得到视觉上的平衡感。下面我们就对居中样式的几种实现方法进行示例：

1.外边距居中法：利用将上下外边距设置为0，左右外边距设置为auto（自动）的方式来得到元素居中的效果，示例代码：

<div style="width:400px;
    margin:0 auto;
    background-color: yellow;">水平居中
</div>

运行效果：
样式成功实现！
2.水平垂直居中：利用将上下左右四个外边距都设置成自动（auto）再利用绝对定位使元素靠于左上角的方法实现样式：

   <div style="position: absolute;
    width: 200px;
    height: 150px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: green;">水平垂直居中</div>

运行结果：
样式成功实现！
3.水平垂直居中，利用相对定位百分比居中再偏移的方式
代码如下：

<div style="height: 600px;
    border: black 1px solid;">
    <div style="position: relative;
    top: 50%;
    left: 50%;
    width:400px;
    height:200px;
    margin: -100px 0 0 -200px;
    background-color: red;">水平垂直居中</div>

从代码上我们可以看到对上和左两个方向使用了50%的相对定位。但我们如果只这样做的话，就会出现如下所示的运行样式：
我们可以看到：虽然红色方块没能居中，但是它的左上角却得到了居中，这是为什么呢？原因是relative是以元素左上角来定位的。
那我们怎样正确的实现这个样式呢，我们只需要在样式里加入以下代码：

   margin: -100px 0 0 -200px;

这条代码的意思是将外边距的上，右，下，左分别设置成了-100px，0,0，-200px,其中的-100和-200正是元素宽高的一半。之所以是负值，是因为元素需要向左移动。
运行效果：

问题再次得到了解决，真是振奋人心的消息！
好啦，以上就是三种将元素居中的方法，喜欢的同学欢迎点赞哦！