一、居中一个绝对定位元素。
先让盒子的左边界位于中间position:absolute;left:50% ;然后再通过左移盒子,左移的距离是盒子宽度的一半margin-left:-266px;
(提醒:left属性和margin属性的百分比值是以包含块为基数计算的)
body {margin:0px; padding:0px;}
#Content {
position:absolute;
left:50%;
width:500px;
margin-top:50px;
margin-left:-266px;
padding:15px;
}
二、居中一个自然流动的元素:margin值auto;
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
}
三、居中一个浮动元素
设置元素的浮动方式为相对定位,然后确定该元素的宽高, 比如宽500 高 300 。先让盒子的左边界位于中间position:relative;left:50% ; 然后再通过左移盒子,左移的距离是盒子宽度的一半margin-left:-250px;
Div{
Width:500px ;height:300px;
Margin: 0px 0 0 -250px;
position: relative;
left:50%;
}