1、行内元素居中
顾名思义,行内元素居中是只针对行内元素的,比如文本(text)、图片(img)、按钮等行内元素,可通过给父元素设置 text-align:center 来实现。另外,如果块状元素属性display 被设置为inline时,也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响,否则一切都是无用功。
.div1{
text-align:center;
}
<div class="div1">Hello world</div>
2、块状元素居中
满足定宽(块状元素的宽度width为固定值)和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中
.div1{
width:200px;
border:1px solid red;
margin:0 auto;
}
<div class="div1">Hello world</div>