CSS垂直居中
1、基于绝对定位的解决方案
<!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>
<style>
/*垂直居中*/
/*绝对定位方案*/
.container {
background: #003d94;
position: relative;
width: 100%;
height: 300px;
}
.block {
background: #6b0;
max-width: 20%;
padding: 20px 30px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<h3>Am I centered yet?</h3>
<p>center me please!</p>
</div>
</div>
</body>
</html>
2、基于视口的解决方案
<!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>
<style>
.container2 {
background: #87ceeb;
width: 100%;
height: 300px;
margin-top: -367px;
}
.block2 {
background: #ff4500;
max-width: 20%;
padding: 20px 80px;
margin: 50vh auto 0;
transform: translateY(50%);
}
</style>
</head>
<body>
<div class="container2">
<div class="block2">
<h3>Am I centered yet?</h3>
<p>center me please!</p>
</div>
</div>
</body>
</html>
3、基于flexbox的解决方案
请注意，当我们使用flexbox时，margin:auto不只是在水平方向上居中，垂直方向上也是如此。
<!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>
<style>
/*基于flexbox的解决方案*/
.container3 {
background: #bfdef3;
width: 100%;
height: 300px;
display: flex;
}
.block3 {
background: #ff4500;
max-width: 20%;
padding: 20px 80px;
margin: auto;
}
</style>
</head>
<body>
<div class="container3">
<div class="block3">
<h3>Am I centered yet?</h3>
<p>center me please!</p>
</div>
</div>
</body>
</html>
