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;
           }
      
    

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

      

  • 相关阅读:
    ☆ [HDU2157] How many ways?? 「矩阵乘法求路径方案数」
    [HDU2065] "红色病毒"问题
    [SP1043] GSS1
    [POJ3233] Matrix Power Series
    「网络流24题」圆桌问题
    [BZOJ4260] Codechef REBXOR
    [HDU5536] Chip Factory
    ☆ [HDU4825] Xor Sum「最大异或和(Trie树)」
    「网络流24题」最长不下降子序列问题
    「网络流24题」试题库问题
  • 原文地址:https://www.cnblogs.com/haijson/p/6389542.html
Copyright © 2011-2022 走看看