这篇文章主要介绍了html中怎么让div居中的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇html中怎么让div居中文章都会有所收获，下面我们一起来看看吧。
margin方法
可以通过margin来使得div居中，通过给margin-left设置的值为父元素的宽减去子元素的宽再除以2（本例中：（400-100）/2=150px），margin-top的值为父元素的高度减去子元素的高度值再除以2（本例中:（300-100）/2=100px）
例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
margin-left: 150px;
margin-top:100px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html> |
效果图：
position方法
可以通过定位的方法来使得div垂直居中，我们可以设置子元素绝对定位，另外设置top和left值为50%，但是需要注意一点在用定位是也要设置margin值，其中margin-left与margin-right的值都为负值，且值的大小是子元素宽高的一半
例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
position: relative;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin:-50px 0 0 -50px
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html> |
效果图：
关于“html中怎么让div居中”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“html中怎么让div居中”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注天达云行业资讯频道。