任务四:定位和居中问题的几种解法

 2016-03-20 22:07

今天继续研究百度前端技术学院的题目,到第四个“定位和居中问题”。本来感觉,通过position属性可以很简单的实现这一功能,但看了别人的发现对于居中的问题其实有很多方法的。

需要完成的是这样一个图:

任务四:定位和居中问题的几种解法

position属性方法:

我初步的想法是通过position属性来居中定位,然后使用 margin和padding 的反移动来将模块居中定位,这种方法是现在做仿APP比较常用的手法。两个黄色的1/4圆是使用 border-radius: 50%;的方式来实现的,然后相对定位下,把多余溢出的部分影藏即可,整理下整个文件就是这样的:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>任务四:定位和居中问题</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        position: absolute;
        background: #ccc;
        width: 400px;
        height: 200px;
        top:50%;
        left:50%;
        margin-left:-200px;
        margin-top:-100px;
        overflow: hidden;
    }
    .C{
        position: absolute;
        width: 100px;
        height: 100px;
        background:#fc0;
        border-radius: 50%;
    }
    .left{
        top:-50px;
        left:-50px;
    }
    .right{
        bottom:-50px;
        right:-50px;
    }
</style>
</head>
<body>
    <div>
        <div class="left C"></div>
        <div class="right C"></div>
    </div>
</body>
</html>

后来发现火大前端的代码通过三种不同的形式来实现了这个功能,另外两种分别是flex方法和表格居中方法。我感觉也是满有意思的,特此分享下。


flex方法:

这个方法比较繁琐点,因为它的兼容性较差,所以我们必须写很长一段:

html代码部分:

<div class="flex-container">   
    <div class="box">
        <div class="left C"></div>
        <div class="right C"></div>
    </div>
</div>

CSS部分:

.flex-container {
  display: -moz-box;  /* Firefox */ 
  display: -ms-flexbox;    /* IE10 */ 
  display: -webkit-box;    /* Safari */  
  display: -webkit-flex;    /* Chrome, WebKit */ 
  display: box;  
  display: flexbox;  
  display: flex;   
  width: 100%;
  height: 100%; 
}
.box{
    width: 400px;
    height: 200px;
    background: #ccc;
    position: relative;
    overflow: hidden;
}
/*.C .right .left同上*/


table方法:

还有一种方法是table方法,这种方法也是比较不错的。

html代码部分:

<div class="wrap">
    <div class="content">
        <div class="inner">
            <div class="left C"></div>
            <div class="right C"></div>
        </div>
    </div>
</div>

CSS部分:

.wrap {
    width: 100%;
    height: 100%;
    display: table;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
.inner {
    width: 400px;
    height: 200px;
    background: #ccc;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
/*.C .right .left同上*/


这三种方法虽然各不相同,但都能实现了上图中的效果,看来,条条大陆同罗马啊。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论:

 评论列表

访客 2016-04-05  21:55

为什么不用fixed呢?题目中有提到调整浏览器高度宽度,始终居中

一株网络 2016-03-22  20:46

我们公司站还有用的 css 不兼容 每次打开也是头疼偶尔客户浏览器版本低就跑偏

访客 2016-03-21  18:45

1、3比较好。不喜欢第2种