航栈
发布
技术实践

5种常用的水平垂直居中方式

在前端开发过程中，盒子居中是常常用到的，水平垂直居中也经常会用到，本文将介绍关于水平垂直居中的5种思路

羊先生的头像
羊先生2020.02.09 · 2 分钟阅读 · 37 阅读
5种常用的水平垂直居中方式封面
文章正文还需 2 分钟

绝对定位+负外边距

html 复制代码 
<style type="text/css">
.a1{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    position: relative;
}
.b1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
</style>
<div class="a1">
	<div class="b1"></div>
</div>

该方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中

使用绝对定位和transform

html 复制代码 
<style type="text/css">
.a2{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    position: relative;
}
.b2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
</style>
<div class="a2">
	<div class="b2"></div>
</div>

这种方法好处就是不必要知道被居中的元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸而言，缺点就是需要浏览器支持CSS3

绝对定位结合margin:auto

html 复制代码 
<style type="text/css">
.a3{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    position: relative;
}
.b3{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
</style>
<div class="a3">
	<div class="b3"></div>
</div>

注意点，top和bottom需要设置为相等的即可值，我这里设置成0了，当然也可以设置为100px或者-100px，无论什么，只要两者相等就行

flex居中

html 复制代码 
<style type="text/css">
.a4{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b4{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<div class="a4">
	<div class="b4"></div>
</div>

flex使用起来很方便，代码简单，方便，在使用时需要注意项目要兼容最低浏览器版本

grid居中

html 复制代码 
<style type="text/css">
.a5{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    display:grid;
    justify-content: center;
    align-items: center;
}
.b5{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<div class="a5">
	<div class="b5"></div>
</div>

grid还有很多开发技巧，远不至于这点，可以参看改变文章

全部代码

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">
    <title>Document</title>
</head>
<body>
<style type="text/css">
section{
	margin-bottom: 30px;
}
.a1{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    position: relative;
}
.b1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
</style>
<section>
	<div class="a1">
		<div class="b1"></div>
	</div>
</section>
<style type="text/css">
.a2{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    position: relative;
}
.b2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
</style>
<section>
<div class="a2">
	<div class="b2"></div>
</div>
</section>
<style type="text/css">
.a3{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    position: relative;
}
.b3{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 100px;
    right: 0;
    bottom: 100px;
    margin: auto;
}
</style>
<section>
<div class="a3">
	<div class="b3"></div>
</div>
</section>
<style type="text/css">
.a4{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b4{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<section>
<div class="a4">
	<div class="b4"></div>
</div>
</section>
<style type="text/css">
.a5{
    width: 300px;
    height: 300px;
    background-color: goldenrod;
    display:grid;
    justify-content: center;
    align-items: center;
}
.b5{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<section>
<div class="a5">
	<div class="b5"></div>
</div>
</section>
</body>
</html>