如何在HTML中实现元素的水平和垂直居中布局?
最编程
2024-02-13 08:15:02
...
方法一：利用定位（常用方法,推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.parent
{ width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent"> <div class="child">我是子元素</div> </div>
</body>
</html>
方法二：利用 margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.parent { width: 500px; height: 500px; border: 1px solid #000; position: relative; }
.child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
</style>
</head>
<body>
<div class="parent"><div class="child">我是子元素</div> </div>
</body>
</html>
方法三：利用 display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child { width: 100px;
height: 100px; border:
1px solid #999;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent"> <div class="child">我是子元素</div> </div>
</body>
</html>
方法四：利用 display：flex;设置垂直水平都居中
<!DOCTYPE html
> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center; }
.child { width: 100px;
height: 100px;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="parent"> <div class="child">我是子元素</div> </div>
</body>
</html>
方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.parent { width: 500px; height: 500px; border: 1px solid #000; }
.child { width: 100px;
height: 100px;
border: 1px solid #999;
margin-top: 200px;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent"> <div class="child">我是子元素</div> </div>
</body>
</html>
方法六：利用 transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent"><div class="child">我是子元素</div> </div>
</body>
</html>
上一篇： 让div元素在页面上完美对齐的技巧
下一篇： 盒子的水平居中