css水平垂直居中

水平垂直居中包括几种,下面我就自己所知道的进行详细的讲解,希望对您有收获

html代码:

 <div class="wrapper">

     <div class="son">我是子盒子</div>

  </div>

css代码:

 1,文字水平垂直居中

       .son {
                    width: 200px;
                    height: 200px;
                    text-align: center;
                    line-height: 200px; //行高为盒子的高度
                }

      

  2,块状元素水平居中

     .son {
                    margin: 0px auto;
                }

  3,块状元素水平垂直居中 

第一种方法:

.son{

weight:200px;

height:200px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置,距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-100px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法:

.son{

weight:200px;

height:200px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置,距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

transform:translate(-50%,-50%);

}

*这是css3里的样式;缺点:兼容性不好,只支持IE9+的浏览器 

---------------

第三种方法

.son{

weight:200px;

height:200px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置,距离上、下、左、右都为0-->

left:0;

right:0;

top:0;

bottom:0;

<!--设置元素的margin样式值为 auto-->

margin:auto;

}

*兼容性较好,缺点:不支持IE7以下的浏览器

 

转载于:https://www.cnblogs.com/lgnblog/p/9994986.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值