让设计居中有两个基本方法: 一个方法使用自动空白边，另一个方法使用定位和负值的空白边。
1. 使用自动空白边让设计居中
假设有一个典型的布局，希望让其中的容器 div 在屏幕上水平居中:
<body>
<div id=’wrapper’>content</div>
<body>
为此，只需定义容器 div 的宽度，然后将水平空白边设置为 auto:
#wrapper { width: 720px; margin: 0 auto;}
2. 使用定位和负值空白边让设计居中
与前面一样，首先定义容器的宽度。然后将容器的 position 属性设置为 relative，将 left 属性设置为 50%。这会把容器的左边缘定位在页面的中间。这会把容器向左边移动它的宽度的一半，从而让它在屏幕上居中:
#wrapper {
width:720px;
position: relative;
left:50%;
margin-left: -360px;
}
扫一扫
3942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
