margin:0 auto;的三种用法

margin: 0 auto; 只对块级元素生效
所以margin:0 auto的用法分为三种，分别为

• 块级元素：div、h1~h3、ul
• 行内元素：span、a
• 行内块元素：button、img、input、textarea

用法一：

对于块级元素，只需要设置width

<div class="block">块级元素</div>

div{
	width: 200px;
	background-color: #ccc;
	margin:0 auto;
}

用法二：

对于行内元素，需要先设置为块级元素，再加宽度

<span>行内元素</span>

span{
	display:block;
	width: 200px;
	background-color: red;
	margin:0 auto;
}

用法三：

对于行内块级元素，需要设置为块级元素，可以不用设置宽度

<input type="text">

span{
	display:block;
	background-color: #ededed;
	margin:0 auto;
}