对(行内元素)inline-block和(块状元素)block元素水平居中显示

在制作HTML页面的时候，经常会遇到让元素水平居中的问题，但是好多时候，我们尝试自己使用的方法，却总也无法让元素水平居中，这时就需要我们对需要居中的元素进行分类总结，然后对症下药。

方法/步骤

1. 1

   一般来说，在页面中需要进行水平居中的元素，大致分为两种，一种是块级元素，即display:block，一种是行内元素display:inline-block;

   
2. 2

   块级元素包括div，ul，p,以及所有的h类标签。行内元素又叫内联元素，a，img，input是最常见的。这些行内元素，可以通过display:block转换成块级元素。

   
3. 3

   弄明白了哪些是块级元素，哪些是行内元素，我们还要知道其主要区别，两个行内元素可以在一行显示，但是第二个块级元素只能换行显示。

   
4. 4

   让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。

   
5. 5

   让块级元素，水平居中的办法是为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的，也就可以在是水平方向上居中了。

   
6. 6

   不管是inline-block还是block，我们需要理解其居中的原理，是inline-block，就对其父级元素添加text-align:center，是块级元素就对其本身添加margin:0 auto;记住了这些，以后再对元素进行居中，居左，居右的时候就不用担心自己不会啦。

   
7.