CSS 设置水平居中 垂直居中

renjianwolai 2015-05-14

水平居中

一:行内元素   文本  图片等

       在其父元素中设置: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,且默认宽度不占满父元素

        

相关推荐