如何定义水平居中

1.定义水平居中——行内元素

首先，什么是行内元素：

常见的a b  span  img  input select  strong等html标签都是行内元素，默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等；但这不是绝对的，通过CSS可以让任何行内元素变成块级元素！比如：

span{display:block}/*span这时设置成了块级元素*/

如何实现水平居中：div{text-align:center}/*DIV内的行内元素均会水平居中*/

1.定义水平居中——块内元素

首先，还是先了解一下行内元素：

常见的div ul ol li dl dt dd h1 h2 h4...等等都是块级元素，当然，这也不是绝对的，通过CSS可以让任何块级元素变成行内元素！比如：h1{display:inline}/*h1这时设置成了行内元素*/ 。块级元素有三个特点（1）块级元素各占据一行，垂直方向排列；（2）块级元素可以设置width、height、padding、margin；（3）块级元素可以包含行内元素和块级元素，但行内元素不能包含块级元素。

（1）定宽块元素。(定宽块状元素：块状元素的宽度width为固定值。)

通过设置“左右margin”值为“auto”来实现居中：如margin:20px auto;

（2）不定宽块元素。(不定宽块状元素：块状元素的宽度width不固定。)

        方法一：1.为需要设置的居中的元素外面加入一个table标签

                      2.为这个 table 设置“左右 margin 居中      

      方法二：通过display:inline;设置为行内元素显示，再用text-align:center来实现。

  方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。