CSS实现水平垂直居中的五种方法

前言

今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。

方法一：margin:auto

子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。

CSS代码：

 div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid #000000;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

HTML代码：

<div>
    <img src="avatar.jpg">
</div>

效果图：

方法二：flex弹性盒子法

利用flex，align-items:center是控制垂直方向居中，justify-content:center是控制水平方向的居中。

CSS代码：

div{
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000000;
}
img{

}

HTML代码：

<div>
    <img src="avatar.jpg">
</div>

效果图：

方法三：margin:负数法

margin可以为负数是我在牛客上报了个课之后才学到的，在那之前一直没有试过。

道理其实跟方法一差不多，通过百分比将图片移动到容器中心，再对齐中心点就行了。

要记住margin如果是负数的话就是向该方向移动，例如margin-left:-100px;，就是向左移动100px。它与正常添加margin是撑开正好相反。

还不明白可以去写个小demo就懂啦。

CSS代码：

div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid #000000;
}
img{
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
}

HTML代码：

<div>
    <img src="avatar.jpg">
</div>

效果图：

方法四：table-cell法

这应该算是很老的方法了吧，我没有这么写过。是在百度上搜索得到的结果，完后尝试写了一下。

有个问题，因为按照理解，我觉得img里不加那个应该也是居中的，但是我加了之后在浏览器调试发现，他向上偏移了一些肉眼大概数不出来的距离，在img里加上之后才消失，不知道为什么，希望有大佬可以告知。

CSS代码：

div{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    border: 1px solid #000000;
}
img{
   vertical-align: middle;
}

HTML代码：

<div>
    <img src="avatar.jpg">
</div>

效果图：

方法五：translate(-50%,-50%)

translate()函数可以将元素向指定的方向移动，我们可以利用它来做成与方法三相同的事情。

CSS代码：

 div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid #000000;
}
img{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%); 
}

HTML代码：

<div>
    <img src="avatar.jpg">
</div>

效果图：

最后

说一下我自己的感受吧，这一共是五种方法，我用过1、2、3、5，其中2和5我用的较多，又以2为最多。

日后如果见到还有别的，也会记录在此的。

点个赞，我们一起学习进步吧♥