margin的值可以是auto auto表示“自动”的意思,当左外边距与右外边距的值都是auto时,那么这个盒子就会水平居中
注意:
●使用margin来实现水平居中时一定要有固定的宽度(给这个盒子设置一个宽度)只有块元素可以实现水平居中,行内元素是不能实现居中的
●只有标准文档流中的盒子才可以使用margin来实现水平居中
●margin属性是用来实现盒子的水平居中而不是文本的水平居中
●text-align这个属性它是用于实现文本的对齐方式,如果其值为center就表示文本水平居中但是它不能实现盒子的水平居中,
<div class="box"></div>
<p>心系祖国,志存高远</p>
<style type="text/css">
.box{
width: 100px;/*如果该元素没有设置固定的宽度那么这个元素就会占据其父元素的100%的宽度*/
height: 100px;
background-color: #f00;
margin: 100px auto;/*使用简写属性*/
}
p{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #0f0;
}
</style>