CSS---元素水平居中

前言

我们在写网页的时候很多情况下都需要对元素进行居中处理，一方面是为了追求美观，另一方面也是为了产品需要，接下来我将为大家介绍几种常用的方法。（讲的几乎是水平居中，垂直居中同理可得）

代码及实现

第一种

第一种的实现原理：设置margin值

<div class="box"><div class="main"></div></div>
*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            height: 100px;
            background-color: aqua;
        }
        .main{
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }

然后可以直接设置算好的margin直接使其居中（一般都是直接auto）

.main{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            background-color: aquamarine;
        }

这种方法比较简单，不过存在一些问题，例如这个居中的盒子宽度是必须设置好的，其次就是该元素不能浮动，一旦浮动布局就会直接崩掉

第二种（万能方法）

这种方法是原理是用position定位来实现的，几乎没有什么bug

*{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 700px;
            height: 100px;
            background-color: aqua;
        }
        .main{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            transform: translateX(-50%) translateY(-50%);
            background-color: aquamarine;
        }

这一波是即实现水平居中又实现垂直居中，而且在放缩的时候布局也不会崩溃（这里推荐大家选择这种方法用下去就行了）

第三种（一般只有一个子盒子的时候也是可以使用的，也很不错）

实现原理：flex+justify-content(水平方向)+align-items(竖直方向)

*{
            margin: 0;
            padding: 0;
        }
        .box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 700px;
            height: 100px;
            background-color: aqua;
        }
        .main{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
        }

结尾

以上就是我经常会用的一些居中方法，如果大家能有所收获时，帮帮萌新点下赞！respect！