未知宽高元素水平垂直居中

垂直水平居中
一、position+transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--方法1:一个未知宽高的弹出框,水平垂直居中-->
<div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1
        <div class="modal">
            <div class="modal-header">弹出窗标题</div>
            <div class="modal-body">
                微信开发者大会(北京)的成功举办,引起业界的极大关注。
                应广大微信开发者的强列要求,深圳微信开发者大会也在如火如荼的筹备中。
                本文总结了技术团队不应错过2014年深圳微信开发者大会的十个理由        
            </div>
        </div>
</div>

<style type="text/css">
.modal-header {
  padding: 10px 20px;
  background: rgba(0,0,0,.25);
  color:#fff;
}
.modal-body{
  padding: 20px;
  background: #fff;
}
.modal {
  border: 1px solid #888;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0,0,0,.5);
  /**主要代码*/
  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
<!--方法1 end-->

 

二、flex
<!--方法2 parent-panel内的元素水平垂直居中-->
<div class="parent-panel">方法2
        <div class="middle-panel">
                <p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则,
                在保持北京站特色之余,针对微信开发的新情况重新设置了议程,内容源于实践又富于启发性。
                </p>
                <p>正进行微信开发的开发团队(开发者)、有兴趣或即将投身于微信开发的开发者、
                想开发相关微信应用正努力寻找微信开发团队的传统IT企业,该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。
                </p>
                <p>如果你还在犹豫,可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。
                </p>
        </div>
</div>

<style type="text/css">
.middle-panel{
        width:500px;
        border:1px solid #888;
}
.parent-panel{
        width:100%;
        height:400px;
        border:1px solid #888;
        
        /**主要代码*/
        display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<!--方法2 end-->

 

三、:after{display:inline-block;height:100%;vertical-aligin:middle;}
<!--方法3 parent-panel2内的元素垂直居中-->
<div class="parent-panel2">方法3
        <div class="middle-panel2">
                <p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则,
                在保持北京站特色之余,针对微信开发的新情况重新设置了议程,内容源于实践又富于启发性。
                </p>
                <p>如果你还在犹豫,可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。
                </p>
        </div>
</div>

<style type="text/css">
.middle-panel2{
        width:500px;
        border:1px solid #888;
        display:inline-block;
    vertical-align: middle;
}
.parent-panel2{
        width:100%;
        height:400px;
        border:1px solid #888;
     text-align:center; } .parent
-panel2:after{ /**主要代码*/ content:"";     display: inline-block;     vertical-align: middle;     height: 100%; } </style> <!--方法3 end--> </body> </html>

 

四、table-cell
<div class="box">
     <span><img src="..."/></span>
</div>

.box{
     display:table;
}
span{
     display:table-cell;
     text-aligin:center;
     vertical-aligin:middle
}

 

五、position+margin

#ele{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin;auto;  
}

 

 

注:已经宽高的div可以用
.mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}
这里不能用margin:-50%,是因为margin百分数是相对于父元素的width

 

水平居中(ul中嵌套li)

一、float+position

浮动方案是比较难理解的,详细内容可以阅读Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文。
.pagination {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pagination ul {
  clear: left;
  float: left;
  position: relative;
  left: 50%;/*整个分页向右边移动宽度的50%*/
}
.pagination li {
  display: block;
  float: left;
  position: relative;
  right: 50%;/*将每个分页项向左边移动宽度的50%*/
}

 

这里简单介绍一下主要步骤:

没有浮动的div:可以看到宽度为100%。

centered menus non floated div

向左边浮动的div:宽度由div中的内容决定(除非显示设置宽度)。

centered menus left floated div

标准左对齐的菜单:使用浮动将导航浮动到左边,每个分页项也浮动。

centered menus left tabs

向右移动ul:设置ul的position:relative属性,并且向右移动50%(left: 50%)。

centered menus shifted tabs

向左移动ul中的所有li:在li上也设置position:relative属性,同时向左移动50%(right: 50%)。

centered menus centered tabs

通过以上步骤就可以达到我们想要的效果了。

优点:兼容性强,扩展性也比较好;

缺点:实现原理较复杂。

二、绝对定位+相对定位

这种方案实际是浮动方案的修改版。

.pagination {
  position: relative;
}
.pagination ul {
  position: absolute;
  left: 50%;
}
.pagination li {
  float: left;
  position: relative;/*注意,这里不能是absolute*/
  right: 50%;
}

 这里解释一下为什么不能用position:absolute,absolute是相对定位父级重新定位,而relative是相对其原来位置

优点:扩展性强,兼容性强;

缺点:理解性难。

posted @ 2015-11-12 15:50  很好玩  阅读(699)  评论(0编辑  收藏  举报