css 水平居中

一:水平居中

水平居中分为4种：块级元素，内联元素，宽度确定，宽度不确定

1.宽度确定的块级元素

margin:0 auto

<div class="warp1">
确定宽度的margin水平居中
</div>

.warp1{
width: 300px;

height:300px;
margin: 10px auto;
border: 1px solid #fecdea;
}

2.不确定宽度的块级元素

没有明确宽度的block，根据块级元素的性质，它默认独占一行，所以这个时候block本身就是浏览器窗口的宽度，就不必要求来设置水平居中了。

      对块级元素中的内容居中。

3.内联元素居中。

text-align：center

内联元素居中，给内联元素父级元素加上div，然后对div设置text-align:center