一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
前端学习工作或者是面试中经常会遇到需要垂直水平居中的问题。使用css实现垂直水平居中有很多种方式。
一、绝对定位的元素实现居中
-
对于已知宽高的绝对定位元素，
上和左边距设置负宽高的一半实现元素的垂直水平居中。缺点：需要提前知道元素的宽高
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中定位</title>
<style>
.needCenterElement{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="needCenterElement"></div>
</body>
</html>`
效果：
-
对于已知宽高的绝对定位元素，上下左右均为0。
缺点：需要提前知道元素的宽高
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中定位</title>
<style>
.needCenterElement{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="needCenterElement"></div>
</body>
</html>`
效果：
-
transform 代替 margin，transform 中 translate 偏移的百分比是相对于自身大小而说的。因此无论绝对定位元素的宽高是多少，都是水平垂直居中的。
缺点：兼容性问题
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中定位</title>
<style>
.needCenterElement{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="needCenterElement"></div>
</body>
</html>
效果：
二、弹性布局实现垂直水平居中
父元素设置弹性布局，并设置主轴和交叉轴上的对其方式为居中。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中定位</title>
<style>
body{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;/*定义body的元素垂直居中*/
justify-content: center;/*定义body的元素水平居中*/
}
.needCenterElement{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="needCenterElement"></div>
</body>
</html>
效果：
三、display:table实现
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中定位</title>
<style>
.parentElement{
width: 300px;
height: 300px;
background-color: blue;
text-align: center;
display: table;
}
.sonElement{
display: table-cell;
background-color: violet;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parentElement">
<div class="sonElement">垂直水平居中</div>
</div>
</body>
</html>
效果：
四、相对定位
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中定位</title>
<style>
body{
width: 100vw;
height: 100vh;
}
.needCenterElement{
width: 300px;
height: 300px;
background-color:chocolate;
margin: 0 auto;/*水平居中*/
position: relative;/*设置position*/
top: 50%; /*偏移*/
/*margin-top: -150px;*/ /*第一种：margin-top*/
transform: translateY(-50%);/*第二种：transform：转换*/
}
</style>
</head>
<body>
<div class="needCenterElement"></div>
</body>
</html>
效果：
