成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xuxueli / 1491人閱讀

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

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

一、水平居中

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

二、垂直居中

line-height

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

??2.table-cell

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

），表格前后帶有換行符。
??#child {
????display: table-cell;//此元素會作為一個表格單元格顯示（類似 
<strike id="e8aey"></strike>
 和 ）
????vertical-align: middle;
??}


??3.使用絕對定位和負外邊距


??使用絕對定位實現(xiàn)垂直居中時，元素的margin-top應(yīng)該等于對應(yīng)的top值的一半再取負值。
??#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.絕對定位和負外邊距


??使用絕對定位實現(xiàn)水平垂直居中時，元素的margin-top和margin-left應(yīng)該等于對應(yīng)的top和left值的一半再取負值。
??#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)換。該屬性允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜。2D 轉(zhuǎn)換方法，通過 translate() 方法，元素從其當(dāng)前位置移動，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)，默認以元素的中心點為基點，x,y如果為負就反方向移動。這種方法類似于上一種使用負邊距。
??#parent {position: relative;}
??#child {
????position: fixed;//相對定位或絕對定位均可
????width:500px;
????height:300px;
????top: 50%;
????left: 50%;
????transform: translate(-50%, -50%);
??}


??3.絕對定位和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;
??}


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


參考文章1：https://www.cnblogs.com/hutuz...
參考文章2：https://blog.csdn.net/liufeif...
           
               
                                           
                       
                 
            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113842.html

               

                      
               
              
              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    垂直水平居中方法小結(jié)
    
                                                     
    摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎(chǔ)的時候看到一篇文章是講完全居中的，這邊對于文章中的內(nèi)容做個小結(jié)。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現(xiàn)垂直居中，再使用來實現(xiàn)水平居中。

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

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

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

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

前言

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

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

...
    
                                                   
                          
    
                                
    
                                    Taste
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           
           

              
 
                

                    
                    
xuxueli

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    







    

<