html页面结构如下，仅讨论块状元素的居中问题，div的父元素为body，改成其他元素同理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
DIV仅水平居中
让一个DIV水平居中，直接用CSS就可以做到。* 为了让div能够看到，我们需要为其设置颜色和高度才能在页面可见，宽度如果不设置默认是继承父元素的宽度 * 只要设置了DIV的宽度，然后使用margin设置边距0 auto或者auto，CSS自动算出左右边距，使得DIV居中。
#mydiv{
margin:0 auto;
width:400px;
height:200px;
background:#ccc;
}
水平居中效果如下：
Paste_Image.png
DIV水平和垂直都居中
- 绝对定位法
#mydiv{
width:400px;
height:200px;
background:#ccc;
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
- 负边距补全法
此法要让DIV水平和垂直居中，必需知道该DIV的宽度和高度，然后设置定位为绝对定位，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
#mydiv{
position:absolute;
width:400px;
height:200px;
background:#ccc;
left:50%;
top:50%;
margin:-100px 0 0 -200px;
}
注意：
这儿的负边距补充也可以使用css3的transform属性实现：
#mydiv{
position:absolute;
width:400px;
height:200px;
background:#ccc;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
1,2的效果如下：
Paste_Image.png
网友评论