如何使一个盒子水平垂直居中

最新推荐文章于 2024-01-04 11:37:09 发布

Li_Arena

最新推荐文章于 2024-01-04 11:37:09 发布

阅读量151

点赞数 2

本文链接：https://blog.csdn.net/Li_Arena/article/details/119425299

版权

方法一:利用定位

<!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-cel

<!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>

方法五:利用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>

欢迎各路大神莅临指导

Li_Arena

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使一个盒子水平垂直居中

方法一:利用定位<!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:
复制链接

扫一扫