● 让所有的元素居中之前,我们应该将所有的元素都放在一个盒子里面(div),但是这个盒子不需要有任何的语义。
● 当然我们还需要给这个盒子起一个名字,方便我们在CSS中定义它
<div class="container">
● 之后我们来给盒子一个宽度,来调整整体的宽度
.container {
width: 700px;
}
● 所有的元素宽度都不会超过父元素的宽度
● 接着我们来设置页面居中
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
这意味着左边和右边需要调整到一样的大小,这样页面就居中了
● 当然最优的是速记减少代码的写法
.container {
width: 700px;
margin: 0 auto;
}