课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > 如何用CSS实现居中
  • 如何用CSS实现居中

    发布:昆明Java培训      来源:SegmentFault      时间:2016-07-30

  • 想要在网页中实现居中的话,在HTML中其实并没有那么简单。因为HTML语言的定位,存在着内容样式多变和内容高宽不定的问题,所以想要合理居中的话对程序员来说也是一个考验。下面就由达内Java培训的小编来给大家讲一个实现居中的方法吧。

    绝对定位+margin:auto

    <style type="text/css">

    .wrp {

    background-color: #b9b9b9;

    width: 240px;

    height: 160px;

    }

    .box {

    color: white;

    background-color: #3e8e41;

    width: 200px;

    height: 120px;

    overflow: auto;

    }

    .wrp1 { position: relative; }

    .box1 {

    margin: auto;

    position: absolute;

    left: 0; right: 0; top: 0; bottom: 0;

    }

    </style>

    <div class="wrp wrp1">

    <div class="box box1">

    <h3>完全居中层1:</h3>

    <h3>开发工具【WeX5】:高性能轻架构、开源免费、跨端、可视化</h3>

    </div>

    </div>

    效果:

    CSS居中

    实现原理:利用css定位规则,设置左右、上下方向定位为0,margin为auto,让css根据定位计算margin值,用hack的方式实现居中。居中块(绿色)的尺寸需要可控,因为css计算margin时也需要参考尺寸值,由于四周为0,所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是max-height、max-width,都是让尺寸不会扩大到与父级一样。

    实际上实现用CSS实现居中的方法还有很多,如果你有更好的方法欢迎和达内Java培训进行交流互动。把更多更好的方法传播给广大的Java学员,达内Java培训和你一同进步。

    推荐文章

上一篇:来看看GC的一些通用概念

下一篇:JS时钟代码分享(上)

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:12/29

Java--零基础业余班

Java--零基础业余班

开班日期:12/29

Java--周末提升班

Java--周末提升班

开班日期:12/29

Java--零基础周末班

Java--零基础周末班

开班日期:12/29

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56