div盒子居中
linfei0 2015-02-01
1.实现div水平居中
html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登入</title>
<style>
#login_form{
width:450px;
height:300px;
margin: 0 auto; /*左右距离为auto,实现水平居中*/
background: #000000;
}
</style>
</head>
<body style="background: #0079d2;margin: 0;padding: 0;">
<div id="login_form">
</div>
</body>
</html>
实现效果：
2.实现div盒子居中（水平垂直）
html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登入</title>
<style>
#login_form{
/*利用绝对定位实现*/
position: absolute;
width:450px;
height:300px;
/*使div左上的点居中*/
left:50%;
top:50%;
/*使盒子往左上分别移动宽高的一半，实现居中*/
margin-left:-225px;
margin-top:-150px;
background: #000000;
}
</style>
</head>
<body style="background: #0079d2;margin: 0;padding: 0;">
<div id="login_form">
</div>
</body>
</html>
运行效果：
相关推荐
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 0喜欢 / 0评论 2020-04-14
STPace 0喜欢 / 0评论 2020-02-17
Simagle 0喜欢 / 0评论 2015-05-27
impress 0喜欢 / 0评论 2019-07-01
Dorissun 0喜欢 / 0评论 2016-09-22
ThikHome 0喜欢 / 0评论 2015-05-27
AnyBisks 0喜欢 / 0评论 2013-07-02
云端漂移 0喜欢 / 0评论 2013-03-20
CoderChang 0喜欢 / 0评论 2012-11-20
统一开发环境UDE 0喜欢 / 0评论 2012-08-31
teresalxm 0喜欢 / 0评论 2011-08-16
xtuhcy 0喜欢 / 0评论 2011-05-11
lovehuayud 0喜欢 / 0评论 2011-04-06
tivon仔 0喜欢 / 0评论 2010-09-10
Ladyseven 0喜欢 / 0评论 2010-09-07
林一天 0喜欢 / 0评论 2010-09-01
Ladyseven 0喜欢 / 0评论 2010-08-31
tivon仔 0喜欢 / 0评论 2010-08-17
MoeRookie 0喜欢 / 0评论 2010-08-17
hitris 0喜欢 / 0评论 2010-08-16
ZiXuanFY 0喜欢 / 0评论 2006-09-24
W3C CSS 0喜欢 / 0评论 2016-10-18