CSS 设置水平居中 垂直居中

 

水平居中

一：行内元素   文本  图片等

       在其父元素中设置：text-align:center;

二：块元素

      1：定宽块元素

            设置：width：固定值。;margin-left:auto;margin-right:auto;

 

       2:不定宽元素

          方法1:为需要设置为居中的元素外加一个table标签（包括<tbody><tr><td>）;为这个table设置 margin-left：auto;margin-right:auto;

          方法2:改变这个块元素为display:inline,然后用text-align:center;来实现居中效果

          方法3:通过给父元素设置float，然后给父元素设置：position:relative 和 left:50%,子元素设置：position:relative和left:-50%;

 

垂直居中

一：父元素高度确定的单行文本： 

         设置父元素的height和line-height的高度值来实现

二：父元素高度确定的多行文本：

       方法1:使用插入table（包括tbody，tr，td标签），同时设置table的vertical-align:middle;(CSS中的垂直居中vertical-align:middle;只有在父元素是td或th时才管用)

       方法2：在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display：table-cell,激活vertical-align属性，但注意，IE6、7并不支持这个样式

 

一个有趣的现象：元素（无论是什么类型的元素，display：none除外）设置以下2个句之一：

    1：position:absolute

    2：float:left或float:right

   元素会自动变为display:inline-block的方式显示，就可以设置元素的weight和height，且默认宽度不占满父元素