昆明java培训
达内昆明广州春城路

18487146383

热门课程

如何用CSS实现居中

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

想要在网页中实现居中的话,在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培训带你了解机器学习

中美it行业数据大pk

昆明达内java培训的面试问题你都掌握了吗

机器学习领域需要掌握什么

选择城市和中心
贵州省

广西省

海南省

扫一扫

了解更多干货