一般来说，在页面中需要进行水平居中的元素，大致分为两种，一种是块级元素，即display:block，一种是行内元素display:inline-block;
块级元素包括div，ul，p,以及所有的h类标签。行内元素又叫内联元素，a，img，input是最常见的。这些行内元素，可以通过display:block转换成块级元素。
弄明白了哪些是块级元素，哪些是行内元素，我们还要知道其主要区别，两个行内元素可以在一行显示，但是第二个块级元素只能换行显示。
让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。
让块级元素，水平居中的办法是为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的，也就可以在是水平方向上居中了。
不管是inline-block还是block，我们需要理解其居中的原理，是inline-block，就对其父级元素添加text-align:center，是块级元素就对其本身添加margin:0 auto