zoukankan      html  css  js  c++  java
  • div水平垂直居中的几种方法(面试问题)

    1:类似子div加空span的方法用伪类实现

    	<div class="outer">
                <div class="inner">一段文字</div>
    	</div>	
              .outer{
               height: 200px;
                200px;
               text-align: center;
               background: #43e;
    
           }
           .inner{
           	 height: 100px;
           	 background: #de4;
           	  100px;
           	 display:inline-block;
           	 vertical-align: middle;
           }
           .outer:after{
           	 content: '';
           	 display: inline-block;
           	 vertical-align: middle;
           	 height: 100%;
           }
    

     2:通过position: absolute;实现包括两种方法实现

       第一种:top/left各50%; margin-left:width/2; margin-top:height/2实现

          	<div class="outer">
           <div class="inner">一段文字</div>
    	</div>	
         .outer{
               height: 200px;
                200px;
               position: relative;
               background: #43e;
    
           }
           .inner{
           	 height: 100px;
           	 background: #de4;
           	 position: absolute;
           	  100px;
           	 top:50%;
           	 left:50%;
           	 margin-left:-50px;
           	 margin-top:-50px;
           	 display:inline-block;
           	 vertical-align: middle;
           }
    

      第二种:子div绝对定位:margin:auto;

    	<div class="outer">
           <div class="inner">一段文字</div>
    	</div>	
            .outer{
               height: 200px;
                200px;
               position: relative;
               background: #43e;
    
           }
           .inner{
           	 height: 100px;
           	 background: #de4;
           	 position: absolute;
           	  100px;
             top:0px;
             left:0px;
             bottom:0px;
             right:0px;
             margin:auto;
           }
    

      3:通过transform属性实现

    	<div class="outer">
           <div class="inner">一段文字</div>
    	</div>
           .outer{
               height: 200px;
                200px;
               position: relative;
               background: #43e;
    
           }
           .inner{
           	 height: 100px;
           	 background: #de4;
            position:absolute;
             100px;
            top:50%;
           left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    
           }
    

      4:通过弹性盒子:flex实现

    	<div class="outer">
           <div class="inner">一段文字</div>
    	</div>
           .outer{
               height: 200px;
                200px;
               background: #43e;
               display: flex;
               justify-content: center;
               align-items: center;
           }
           .inner{
           	 height: 100px;
           	 background: #de4;
           	  100px;
           }
      
    

      多为网上总结(有更多方法,请评论分享,谢谢)

      

  • 相关阅读:
    store 加载异常处理与加载信息提示
    jQuery和ExtJS的timeOut超时问题和event事件处理问题
    Virtualbox虚拟机安装CentOS6.5图文详细教程
    虚拟机
    20180104 wdcp中的mysql重启不成功
    MySQL取得某一范围随机数(MySQL随机数)
    安装lszrz,用于上传文件
    cpu占用高 20180108
    怎么实时查看mysql当前连接数
    数据库SQL优化大总结之 百万级数据库优化方案
  • 原文地址:https://www.cnblogs.com/haijson/p/6389542.html
Copyright © 2011-2022 走看看