css如何设置竖直居中（带你玩转CSS垂直水平居中）
css如何设置竖直居中（带你玩转CSS垂直水平居中）
对于前端程序员，你掌握了几种垂直水平居中的方法，现在带你看一看，喜欢的朋友记得点赞加关注，我会定时更新程序员的世界。
1、flex布局<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no">
</head>
<style>
#container {
margin: 10px;
border: 1px solid red;
height: 100vh;
display: -webkit-flex;
display: flex;
/* 关键属性 */
align-items: center;
/* 垂直居中 */
justify-content: center
/* 水平居中 */
}
.item {
width: 200px;
height: 200px;
border: 1px solid lightpink;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container">
<div class="item">
<img src="img/avter.jpg" />
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no">
</head>
<style>
#container {
border: 1px solid red;
height: 100vh;
position: relative;
}
.item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 200px;
height: 200px;
margin: auto;
border: 1px solid lightpink;
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container">
<div class="item">
<img src="img/avter.jpg" />
</div>
</div>
</body>
</html>3.transform absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no">
</head>
<style>
#container {
border: 1px solid red;
height: 100vh;
position: relative;
}
.item {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% -50%);
border: 1px solid lightpink;
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container">
<div class="item">
<img src="img/avter.jpg" />
</div>
</div>
</body>
</html>4. absolute margin负值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no">
</head>
<style>
#container {
border: 1px solid red;
height: 100vh;
position: relative;
}
.item {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
border: 1px solid lightpink;
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container">
<div class="item">
<img src="img/avter.jpg" />
</div>
</div>
</body>
</html>5. absolute calc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no">
</head>
<style>
#container {
border: 1px solid red;
height: 100vh;
position: relative;
text-align: center;
}
.item {
position: absolute;
border: 1px solid green;
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: calc(50% - 100px);
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container">
<div class="item">
<img src="img/avter.jpg" />
</div>
</div>
</body>
</html>6. line-height vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no">
</head>
<style>
#container {
border: 1px solid red;
height: 100vh;
text-align: center;
line-height: 100vh;
}
.item {
display: inline-block;
line-height: 1.5;
border: 1px solid green;
vertical-align: middle;
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container">
<div class="item">
<img src="img/avter.jpg" />
</div>
</div>
</body>
</html>兼容性说明
