如何实现一个div垂直居中（至少3种方法）
要实现一个div在页面上垂直居中，可以使用以下三种常见的方法：
- 使用Flexbox布局
- 使用Grid布局
- 使用绝对定位和transform属性
以下是每种方法的示例代码：
方法1: Flexbox布局
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100%;
}
.centered-div {
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-div">
<!-- Content here -->
</div>
</div>
</body>
</html>方法2: Grid布局
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.container {
display: grid;
place-items: center;
height: 100%;
}
.centered-div {
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-div">
<!-- Content here -->
</div>
</div>
</body>
</html>方法3: 绝对定位和transform属性
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="centered-div">
<!-- Content here -->
</div>
</body>
</html>以上三种方法都可以实现div的垂直居中，你可以根据自己的项目需求和个人喜好选择合适的方法。
评论已关闭