css让盒子水平垂直居中的十个方法_css让一个单元格盒子水平垂直居中-优快云博客

本文链接：https://blog.youkuaiyun.com/anglesweet/article/details/120252206

本文展示了使用Flex布局、Grid布局、绝对定位和相对定位、Table布局以及行内元素的水平垂直居中等方法，详细解释了如何在网页中实现元素的垂直居中对齐。这些技术涵盖了现代前端开发中的常见布局策略，帮助开发者更好地理解和应用不同的居中技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;

}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{
display: flex;
justify-content: center;
align-items: center;

}
.allCenterChild{

}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

2、flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;

}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{
display: flex;

}
.allCenterChild{
margin: auto;
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

3、flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;

}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{
display: flex;

}
.allCenterChild{
align-self:center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

4、grid布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;

}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{
display: grid;
}
.allCenterChild{
margin: auto;
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

5、grid布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;

}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{
display: grid;
}
.allCenterChild{
justify-self: center;
align-self: center;
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

6、绝对定位和相对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;
    position: relative;
}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{

}
.allCenterChild{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

7、绝对定位和相对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;
    position: relative;
}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{

}
.allCenterChild{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

8、table布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;
    position: relative;
}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.allCenterChild{
display: inline-block;
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>

9、行内元素水平垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>

.oneline{
    margin-top: 50px;
    width: 600px;
    height: 80px;
    background-color: pink;
    font-size: 25px;
    text-align: center;
    line-height: 80px;
}
</style>
</head>
<body>

<div class="oneline">
content
</div>
</body>
</html>

10、margin+transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子垂直居中</title>
<style>
.wrap{
    width: 600px;
    height: 600px;
    border:2px solid purple;
    position: relative;
}
.item{
width: 150px;
height: 150px;
background-color: green;
}
.allCenter{
    overflow: hidden;
}
.allCenterChild{
margin: 50% auto;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="wrap allCenter">
<div class="item allCenterChild">

</div>
</div>
</body>
</html>