css学习笔记三

   总结一下水平居中和垂直居中的方法，欢迎交流指正，共同进步！

 1.水平居中

   1.1）：行内元素水平居中，在其父类设置text-align:center;

  

   1.2)： 块级元素水平居中有三种

   第一种：定宽的块级元素，可以设置margin:0 auto;

   第二种：把块级元素放进table的td里面，然后设置table的左右水平居中margin: 0 auto;

   第三种：不定宽的块级元素 可以通过设置display:inline，转换成行内元素，再设置text-align:center;

   第四种：不定宽的块级元素  可以通过对其父元素设置float:left;position:relative;left:50%,子元素设置position:relative;left：-50%;实现水平居中

2.垂直居中

　　2.1）父级高度确定的单行文本

      可以通过设置行高line-height与高度一致，实现垂直居中

     2.2)父级高度确定的多行元素

    可以通过设置

　　<table>

　　　　<tbody>

              <tr>

                  <td>需要居中的元素</td>

             </tr>

           <tbody>

     </table>

     2.3）父级高度确定的多行元素

     可以通过设置父元素display：table-cell来激活vertical-align，再对其设置属性middle