php div中的字上下居中,DIV浏览器垂直居中布局

position:absolute;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px

POSITION用绝对定位是脱离文档流,,针对浏览器,

DIV左上角顶点距浏览器左边整个浏览器宽度的一半即50%

DIV左上角顶点距浏览器顶部整个浏览器高度的一半即50%

现在DIV左上角顶点在浏览器的中心位置,然后设置margin-left 往左边浏览器DIV的一半,再设置margin-top往顶部边浏览器DIV的一半,

这样DIV就垂直居中了

为什么DIV的POSITION不用相对定位呢,,

position:relative;width:200px;height:200px;left:0%;top:0%;  这个时候是他在正常流中的位置

BODY没有高度有margin,top:50% 不起作用

left:50%  可以起作用,,但是它是相当于BODY中的一半 ,得设置body{marign:0px;} 才等于整个浏览器宽度的一半。

文字在DIV中竖直居中

(DIV的高度-文字的高度)/2 为padding-top值

然后div高度修改为原DIV的高度-padding-top值

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值