html中怎么实现水平居中,css 怎么实现 div水平居中 呢?

css实现 div水平居中方法:

一、div居中实现介绍

1、在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。

2、最外层DIV的CSS命名为“#divcss”,这个时候为了兼容各大浏览器实现最外层的这个居中。

3、对“body”设置css内容居中样式(text-align:center)

即CSS代码:body{text-align:center}

23aa9597b3b7c589d98f58e2d536fd6e.png

一设置:

这个时候对“#divcss”设置居中必备样式css margin

即CSS代码:#divcss{margin:0 auto}

35c7b58c0c2d0ed483fbadfefb86e264.png

二、DIV居中用法实例

为了便于观察布局居中效果,我们再对“#divcss”加一个css边框为黑色,css宽度为300px;高度为100px样式。

1、最终得到DIV居中的CSS代码:body{ text-align:center}

#divcss{margin:0 auto;border:1px solid #000;width:300px;height:100px}

ed3d40db2b61f5e0bc71e8aff95badad.png

2、对应html代码片段:

DIV水平居中案例

e924d1058c017f94e81cbf4e1e3d3c97.png

3、居中案例截图

b27064de68095d5d685e39ab7acaa83d.png

4、在线演示:

e34160298825342fd863a2497c94f43b.png

三、布局居中总结

布局居中我们需要对对象加margin:0 auto样式,当然如果不加有的浏览器会实现居中效果,但有的浏览器就不会默认是居中。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值