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

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

      

  • 相关阅读:
    抓取登录后的数据
    Form认证的几点说明
    eclipse启动错误:java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContainer
    mysql游标的使用 No data
    mysql insert 主键 重复问题
    tail 命令
    maven 打包可执行jar的方法
    maven中如何打包源代码
    工程师,请优化你的代码
    在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)
  • 原文地址:https://www.cnblogs.com/haijson/p/6389542.html
Copyright © 2011-2022 走看看