8. 实现水平居中和垂直居中的方法
参考答案
DETAILS
1、水平居中
- 使用
text-align: center（适用于内联元素） - 使用
margin: auto（适用于块级元素） - 使用
Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Horizontal Centering</title>
<style>
.container {
display: flex;
/* 水平居中 */
justify-content: center;
width: 100%;
border: 1px solid black;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
- 使用 Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Horizontal Centering</title>
<style>
.container {
display: grid;
/* place-items: center;是 CSS Grid 布局中的一个简写属性。相当于justify-items: center;和align-items: center; */
place-items: center;
/* 水平居中 */
/* justify-items: center; */
width: 100%;
border: 1px solid black;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
- 使用
position: absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Centering</title>
<style>
.container {
position: relative;
height: 200px;
border: 1px solid black;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px; /* 50px 是盒子的宽度的一半 */
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
2、垂直居中
- 使用
line-height（适用于单行文本，行高等于容器高度时垂直居中） - 使用
Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Centering</title>
<style>
.container {
display: flex;
/* 垂直居中 */
align-items: center;
justify-content: center;
height: 200px;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
- 使用 Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Centering</title>
<style>
.container {
display: grid;
/* place-items: center;是 CSS Grid 布局中的一个简写属性。相当于justify-items: center;和align-items: center; */
place-items: center;
/* 垂直居中 */
/* align-items: center; */
height: 200px;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
- 使用
position: absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Centering</title>
<style>
.container {
position: relative;
height: 200px;
border: 1px solid black;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 50px 是盒子的高度的一半 */
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
vertical-align
vertical-align 属性用于设置行内元素（inline elements）或行内块元素（inline-block elements）的垂直对齐方式。vertical-align: middle; 的具体作用是将元素的垂直对齐方式设置为居中，使其相对于父元素的基线（baseline）居中对齐。
<!DOCTYPE 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>Document</title>
<style>
.container {
font-size: 16px;
/* 设置父元素的字体大小 */
}
.text,
.icon {
vertical-align: middle;
/* 设置垂直居中 */
}
</style>
</head>
<body>
<div class="container">
<span class="text">文字</span>
<img class="icon" src="icon.png" alt="图标" />
</div>
</body>
</html>