div盒子居中
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>
运行效果：
相关推荐
STPace 2020-02-17
Dorissun 2016-09-22
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
Simagle 2015-05-27
impress 2019-07-01
ThikHome 2015-05-27
AnyBisks 2013-07-02
云端漂移 2013-03-20
CoderChang 2012-11-20
统一开发环境UDE 2012-08-31
teresalxm 2011-08-16
xtuhcy 2011-05-11
lovehuayud 2011-04-06
tivon仔 2010-09-10
Ladyseven 2010-09-07
林一天 2010-09-01
Ladyseven 2010-08-31