zoukankan      html  css  js  c++  java
  • 未知宽高元素水平垂直居中

    垂直水平居中
    一、position+transform
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    </head>
    <body>
    <!--方法1:一个未知宽高的弹出框,水平垂直居中-->
    <div style="position:relative;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{
            500px;
            border:1px solid #888;
    }
    .parent-panel{
            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{
            500px;
            border:1px solid #888;
            display:inline-block;
        vertical-align: middle;
    }
    .parent-panel2{
            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{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;
       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是相对其原来位置

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

    缺点:理解性难。

  • 相关阅读:
    struts2解决动态多文件上传的问题(上传文件与数据库字段一一对应)(转)
    Android应用如何开机自启动、自启动失败原因
    android操作ini工具类
    C++#define的用法(含特殊)
    c指针
    WP7备注(34)(UpdateSourceTrigger|ValidatesOnExceptions|NotifyOnValidationError)
    WP7备注(30)(数据绑定基本)
    WP7备注(38)(VisualStateManager)
    WP7备注(39)(ResourceDictionary)
    WP7备注(35)(Vector Graphics|Raster Graphics)
  • 原文地址:https://www.cnblogs.com/shytong/p/4959287.html
Copyright © 2011-2022 走看看