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,且默认宽度不占满父元素

        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值