CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了，一般面试官问的时候面试者都会回答出来，但是继续追问还有没有其他方法的时候有可能就说不出来了。
本着学习知识的目的，特在此纪录CSS实现水平垂直居中的多种方法。
准备工作
我们先写一个简单的HTML文件，方便我们接下来进行效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>水平垂直居中</title>
</head>
<body>
<div class="container">
<div class="inner">水平垂直居中</div>
</div>
</body>
</html>
/* CSS文件 */
.container{
width: 400px;
height: 400px;
border: 1px solid black;
}
.inner{
width: 100px;
height: 100px;
border: 1px solid red;
}
最终浏览器呈现的效果如下
水平居中
水平居中的方式有多种，总体来说可以使用flex、grid、text-align、margin等方法，我们要实现如下所示的效果
使用flex方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
display: flex;
justify-content: center;
}
只需在父DOM元素中新增以上CSS即可实现水平居中
使用margin方法
.inner{
width: 100px;
height: 100px;
border: 1px solid red;
/* 新增 */
margin: 0 auto;
}
注：这个方法适用于知道子dom元素宽度已知的情况下
使用text-align方法
要注意：
text-alignCSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，并不控制块元素自己的对齐，只控制他行内内容的对齐。
所以这个属性对于我的HTML文件是无效的，我们要把内部的div改为span即可生效，修改后的代码如下：
<body>
<div class="container">
<!-- 将div修改为span -->
<span class="inner">水平垂直居中</span>
</div>
</body>
CSS样式表修改为如下所示
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
text-align: center;
}
使用grid方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
display: grid;
grid-template-rows: 1fr; /* 让inner的高度占满 */
grid-template-columns: 1fr; /* 让inner的宽度占满 */
justify-items: center; /* 让inner水平居中 */
}
关于grid的更多介绍详见张鑫旭的👉博客👈
使用left方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
position: relative;
}
.inner{
width: 100px;
height: 100px;
border: 1px solid red;
/* 新增 */
position: absolute;
left: 50%;
transform: translateX(-50%);
}
这个地方要注意的是，如果想要使用left、right、top、bottom方法的时候必须保证父dom的position为relative属性，子dom的position为absolute属性，这样才可以生效。并且子dom的基准是离其最近的position属性为relative的父dom元素
当然，这里你如果很明确子dom元素和父dom元素的宽度的话，比如我写的HTML代码，可以直接使用left: 150px来实现，但是这样的话就没有什么拓展性了。
垂直居中
垂直居中的方法也有很多，比如flex、top、grid等，我们要实现的效果如下
使用flex方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
display: flex;
align-items: center;
}
只需在父DOM元素中新增以上CSS即可实现垂直居中、
使用grid方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
align-items: center;
}
使用top方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
position: relative;
}
.inner{
width: 100px;
height: 100px;
border: 1px solid red;
/* 新增 */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
使用line-height方法
使用line-height方法是不能使我这个HTML垂直居中的，但是如果你想垂直居中的元素是一个单行文本，那么可以参照这个方法。
<body>
<div class="container">
<!-- 将div修改为span -->
<span class="inner">水平垂直居中</span>
</div>
</body>
.container{
width: 400px;
height: 400px;
border: 1px solid black;
}
.inner{
width: 100px;
line-height: 400px;
border: 1px solid red;
}
请注意一定是单行文本，因为line-height是指一行文本的高度，如果是两行文本的话就不能实现垂直居中的效果了
使用inline-block方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
}
/* 新增 */
.container::after{
display:inline-block;
vertical-align:middle;
content:'';
height:100%;
}
.inner{
width: 100px;
height: 100px;
border: 1px solid red;
/* 新增 */
display: inline-block;
vertical-align: middle;
}
以上就是我对于垂直居中方法的一些整合，如果您有什么其他的方法，请在评论区进行讨论！
