亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

水平垂直居中小結(jié)

xuxueli / 1543人閱讀

摘要：相等的上下值三水平垂直居中絕對(duì)定位和負(fù)外邊距使用絕對(duì)定位實(shí)現(xiàn)水平垂直居中時(shí)，元素的和應(yīng)該等于對(duì)應(yīng)的和值的一半再取負(fù)值。相對(duì)定位或絕對(duì)定位均可絕對(duì)定位和布局能實(shí)現(xiàn)居中效果的方法還有很多，這里列出來(lái)的方法只是一小部分，日后會(huì)慢慢補(bǔ)充。

??我們?cè)陧?yè)面布局中經(jīng)常會(huì)遇到需要將內(nèi)容水平/垂直居中的情況，現(xiàn)在我們就來(lái)梳理一下實(shí)現(xiàn)的方法。

一、水平居中

??1.行元素設(shè)置其父元素的text-align：center，適用于單行文本水平居中。
??2.塊元素設(shè)置其本身的左右margin為auto即可,適用于設(shè)置了一定寬高值的塊元素。
??3.使用flex

二、垂直居中

line-height

??使行元素垂直居中，可以設(shè)置行元素的line-height值，適用于單行文本垂直居中。
??若行元素所在的塊級(jí)父元素有固定高度，則使行元素的line-height值與其父元素的高度相等；若行元素所在的父元素沒(méi)有設(shè)置高度，則行元素設(shè)置的line-height值就是其父元素的高度。
??若要居中一張圖片，可以設(shè)置圖片的vertical-align：middle; 圖片的父元素設(shè)置line-height值。

??2.table-cell

??通過(guò)如下設(shè)置可以實(shí)現(xiàn)元素的垂直居中。
??#parent {display: table;}//此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似

），表格前后帶有換行符。
??#child {
????display: table-cell;//此元素會(huì)作為一個(gè)表格單元格顯示（類似 

        
<
         和 ）
        ????vertical-align: middle;
        ??}
        

        ??3.使用絕對(duì)定位和負(fù)外邊距
        

        ??使用絕對(duì)定位實(shí)現(xiàn)垂直居中時(shí)，元素的margin-top應(yīng)該等于對(duì)應(yīng)的top值的一半再取負(fù)值。
        ??#parent {position: relative;}
        ??#child {
        ????height: 30%;
        ????width: 50%;
        ????position: absolute;
        ????top: 50%;
        ????margin: -15% 0 0 0;
        ??}
        

        ??4.相等的上下padding值
        

        ??#parent {
        ????padding: 5% 0;
        ??}
        ??#child {
        ????padding: 10% 0;
        ??}
        
三、水平垂直居中

        ??1.絕對(duì)定位和負(fù)外邊距
        

        ??使用絕對(duì)定位實(shí)現(xiàn)水平垂直居中時(shí)，元素的margin-top和margin-left應(yīng)該等于對(duì)應(yīng)的top和left值的一半再取負(fù)值。
        ??#parent {position: relative;}
        ??#child {
        ????position: absolute;
        ????top: 50%;
        ????left: 50%;
        ????height: 30%;
        ????width: 50%;
        ????margin: -15% 0 0 -25%;
        ??}
        

        ??2.定位和transform
        

        ??transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。2D 轉(zhuǎn)換方法，通過(guò) translate() 方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)，默認(rèn)以元素的中心點(diǎn)為基點(diǎn)，x,y如果為負(fù)就反方向移動(dòng)。這種方法類似于上一種使用負(fù)邊距。
        ??#parent {position: relative;}
        ??#child {
        ????position: fixed;//相對(duì)定位或絕對(duì)定位均可
        ????width:500px;
        ????height:300px;
        ????top: 50%;
        ????left: 50%;
        ????transform: translate(-50%, -50%);
        ??}
        

        ??3.絕對(duì)定位和margin:auto
        

        ??#parent {position: relative;}
        ??#child {
        ????width: 50%;
        ????height: 30%;
        ????position: absolute;
        ????top: 0;
        ????bottom: 0;
        ????left: 0;
        ????right: 0;
        ????margin: auto;
        }
        

        ??4.flex布局
        ??div{
        ????display: flex;
        ????justify-content:center;
        ????align-items:Center;
        ??}
        

        ??能實(shí)現(xiàn)居中效果的方法還有很多，這里列出來(lái)的方法只是一小部分，日后會(huì)慢慢補(bǔ)充。
        

        參考文章1：https://www.cnblogs.com/hutuz...
        參考文章2：https://blog.csdn.net/liufeif...
                   
               
                                           
                       
                 
            
                     
             
               
        
                   
         文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
        
                 
                   
        轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113842.html
        
               
        
                      
               
              
              
        
                
        相關(guān)文章
        
                
          
                             
                                                                                                    
        • 
                                                
          
                          
          垂直水平居中方法小結(jié)
          
                                                     
          摘要：前言最近看到很多面試題目會(huì)問(wèn)請(qǐng)說(shuō)出幾種使用完成垂直水平居中的方法正好看基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小結(jié)。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來(lái)實(shí)現(xiàn)垂直居中，再使用來(lái)實(shí)現(xiàn)水平居中。

前言：最近看到很多面試題目會(huì)問(wèn)：請(qǐng)說(shuō)出幾種使用css完成垂直水平居中的方法？正好看css基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小...
          
                                                   
                          
          
                                
          
                                    amuqiao
                                    
                                    評(píng)論0 
                                    收藏0 
                                
          
                          
          
                      
          
                    
          •  
                                                                                       
        • 
                                                
          
                          
          垂直水平居中方法小結(jié)
          
                                                     
          摘要：前言最近看到很多面試題目會(huì)問(wèn)請(qǐng)說(shuō)出幾種使用完成垂直水平居中的方法正好看基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小結(jié)。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來(lái)實(shí)現(xiàn)垂直居中，再使用來(lái)實(shí)現(xiàn)水平居中。

前言：最近看到很多面試題目會(huì)問(wèn)：請(qǐng)說(shuō)出幾種使用css完成垂直水平居中的方法？正好看css基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小...
          
                                                   
                          
          
                                
          
                                    xcc3641
                                    
                                    評(píng)論0 
                                    收藏0 
                                
          
                          
          
                      
          
                    
          •  
                                                                                       
        • 
                                                
          
                          
          小結(jié)——居中問(wèn)題的解決
          
                                                     
          摘要：居中問(wèn)題居中問(wèn)題定位不管用水平居中需要做如下處理定位不管用，水平居中需要做如下處理定位管用水平居中需要做如下處理定位管用，水平居中需要做如下處理定位加元素已知寬度定位加元素已知寬度父元素設(shè)置為子元素設(shè)置為距上，據(jù)左，然后減去元素自居中問(wèn)題：
1.Fixed定位margin：0 auto;不管用，水平居中需要做如下處理：
position: fixed;
top: 0;
bottom: 0;
...
          
                                                   
                          
          
                                
          
                                    darkbaby123
                                    
                                    評(píng)論0 
                                    收藏0 
                                
          
                          
          
                      
          
                    
          •  
                                                                                       
        • 
                                                
          
                          
          CSS學(xué)習(xí)筆記－元素水平垂直居中
          
                                                     
          摘要：前言布局中經(jīng)常會(huì)遇到元素水平居中的需求今天根據(jù)以前的學(xué)習(xí)筆記以及看過(guò)的一些技術(shù)博客做個(gè)元素水平居中的小結(jié)。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。

前言
布局中經(jīng)常會(huì)遇到元素水平居中的需求,今天根據(jù)以前的學(xué)習(xí)筆記?以及看過(guò)的一些技術(shù)博客做個(gè)元素水平居中的小結(jié)。
正文
圖片的水平垂直居中

    //圖片地址為http://static.jsbin.com/ima...
          
                                                   
                          
          
                                
          
                                    NeverSayNever
                                    
                                    評(píng)論0 
                                    收藏0 
                                
          
                          
          
                      
          
                    
          •  
                                                                                       
        • 
                                                
          
                          
          CSS 行內(nèi)布局實(shí)踐小結(jié)
          
                                                     
          摘要：相關(guān)內(nèi)聯(lián)格式上下文主要影響內(nèi)布局的行盒模型，這是一個(gè)顯示區(qū)域，根據(jù)塊狀容器內(nèi)，每一行的多個(gè)內(nèi)聯(lián)元素都會(huì)共同生成一個(gè)行盒模型。

前言

通常情況下，要使元素排列在一行內(nèi)，通常做法就是使用float，然后再清浮動(dòng)。
如下：showImg(https://segmentfault.com/img/bVmVua);

但是如果要使其垂直居中，則必須手動(dòng)調(diào)整，藍(lán)色或者綠色塊的位置，比較繁瑣。

...
          
                                                   
                          
          
                                
          
                                    Taste
                                    
                                    評(píng)論0 
                                    收藏0 
                                
          
                          
          
                      
          
                    
          •  
                                                                           
                
        
              
        
              
               
        
                  
                  
        發(fā)表評(píng)論
        
                   
               
        
              
        
                
        
                  
        0條評(píng)論
           
                
         
                      
        
              
        
           
           
        
              
         
                

                   
              
  
        
                  
        最新活動(dòng)
         
           
                             
              

        


        
                                
                      
        
           
        
        
       
    
    
     
        
      
    
        
    
    
        
    
       
       
        
         
        閱讀需要支付1元查看