css居中

一、水平居中
1、margin:0 auto;
适用于块级元素，并且对浮动元素和定位元素无效

2、text-align:center
适用于图片、按钮、文字等行内元素（display为inline或inline-block），写在父元素上对子元素有效

3、使用浮动配合相对定位来进行水平居中
浮动居中的原理：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出自身一半的宽度拉回来，因为相对定位正是相对于自身来定位的，所以自身一半的高度只要把left或right设为50%就可以得到了。

Paste_Image.png

二、垂直居中
line-height 适用于一行文字，也是写在父元素上

三、垂直水平居中
1、利用表格
表格本身居中只要用到td或th元素的text-align:"center"和vertical-align:"middle"就可以实现里面内容的水平和垂直居中问题了，而且表格默认的就会对它里面的内容进行垂直居中。

Paste_Image.png

因此对于那些不是表格的元素，我们可以通过display:table-cell来把它模拟成一个表格单元格，这样就可以利用表格的居中特性了。

Paste_Image.png

2、使用绝对定位来居中
适用于已经知道宽度和高度的元素。绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%，此时元素并不是居中的，而是比居中的位置向右向下偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值把它拉回到居中的位置，这个负的margin值就取元素宽度和高度的一半。

Paste_Image.png

如果只想实现一个方向的居中，则可以使用left,margin-left来实现水平居中，使用top,margin-top来实现垂直居中。

3、另一种使用绝对定位居中的方法

Paste_Image.png

在宽高确定的情况下，只要上下，左右位置分别相同就可以了，可以设置四个都是0，没有设置宽高的情况下会根据上下左右设置的位置决定大小。