必会:在HTML中如何使一个盒子水平垂直居中？

最新推荐文章于 2023-05-19 15:45:53 发布

帅帅程序猿

最新推荐文章于 2023-05-19 15:45:53 发布

阅读量778

点赞数

分类专栏： html/css理解文章标签： css html

本文链接：https://blog.csdn.net/weixin_57066052/article/details/120187851

版权

html/css理解专栏收录该内容

2 篇文章 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: 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>

方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

<!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; }
.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>

帅帅程序猿

关注

0
点赞
踩
0

收藏

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

方法一：利用定位（常用方法,推荐）<!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
复制链接

扫一扫