塊的垂直居中

時間 2019-11-13

標籤垂直居中简体版

原文原文鏈接

須要固定寬高的垂直居中：css

一，定位html

　　1.1 之absolutecss3

　　寫法一：position:absolute;web

  .one{            
    position:absolute;      
    width:200px;          
    height:200px;           
    top:50%;           
    left:50%;           
    margin-top:-100px;           
    margin-left:-100px;         
    background:red; 
  }

　　寫法二：margin:auto這個必需要有佈局

.two{        
  position:absolute;      
  width:140px;         
  height:140px;         
  top:0;        
  right:0;     
  bottom:0;   
  left:0;    
  margin:auto;   
  background:black;

}

　　1.2定位之fixed;測試

　　寫法同上。flex

二，display:table-cell 屬性使內容垂直居中spa

.three{        
  display:table-cell;             
  vertical-align:middle;            
  text-align:center;        
  width:120px;            
  height:120px;          
}

三，行內元素的垂直居中line-height.3d

四，css3code

　　4.1，css3的 display:-webkit-box 屬性，再設置-webkit-box-pack:center/-webkit-box-align:center;

.one{        
  width:90px;       
  height:90px;   
  display:-webkit-box;      
  -webkit-box-pack:center;        
  -webkit-box-align:center;     
  background:yellow;    
}

　　4.2 ,css3的新屬性 transform:translate(x,y) 屬性;這個方法能夠不須要設定固定的寬高，在移動端用的會比較多，在移動端css3兼容的比較好

.two{        
  position:absolute;      
  width:80px;         
  height:80px;         
  top:50%;          
  left:50%;       
  transform:translate(-50%,-50%);      
  -webkit-transform:translate(-50%,-50%);       
  -moz-transform:translate(-50%,-50%);      
  -ms-transform:translate(-50%,-50%);       
  background:green; 
}

五，:before元素

.one{           
  position:fixed;   
  display:block; 
  top:0;  
  right:0;   
  bottom:0;     
  left:0;    
  text-align:center; 
  background:rgba(0,0,0,.5);
}
.one:before{           
  content:'';           
  display:inline-block;        
  vertical-align:middle;         
  height:100%;
}
.one .content{     
  display:inline-block;        
  vertical-align:middle;        
  width:60px;        
  height:60px;            
  line-height:60px;        
  background:yellow;
}

六，flex

parentElement{
    display:flex;/*Flex佈局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

不知道高度；

　　一，定位和transform；

　　　　1.1 不知道父與子容器的高度；

parentElement{
  position:relative;
}

childElement{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform:translate(-50%);       
  -moz-transform:translate(-50%);      
  -ms-transform:translate(-50%);  
}

　　　　1.2 若父容器下只有一個元素，且父元素設置了高度，則只須要使用相對定位便可；

parentElement{
  height:xxx;
}

.childElement {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform:translate(-50%);       
  -moz-transform:translate(-50%);      
  -ms-transform:translate(-50%);  
}

七，inline-block;

　　#box { height: 400px; background: #c00;}
　　#content, #actor { display: inline-block; vertical-align: middle;}
　　#content { font-size: 12px; color: #fff;}
　　#actor { height: 400px; font-size: 0;}

　　這裏黑體字的比較重要；

<!DOCTYPE html>
<html>
    <head>
        <title>nav測試</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
    #box { height: 400px; background: #c00;}
    #content, #actor { display: inline-block; vertical-align: middle;}
    #content { font-size: 12px; color: #fff;}
    #actor {height: 400px; font-size: 0;}
</style>
    </head>
    <body>
        <div id="box">
                <div id="content">
                        我是內容<br />
                        我也是內容
                </div>
                <div id="actor">我是演員</div>
        </div>
    </body>
</html>

最終顯示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。