CSS水平居中和垂直居中

silenceboy 發布于2019-08-30 14:09 / 2850人閱讀

摘要：不定寬塊狀元素水平居中垂直居中利用屬性垂直居中垂直居中利用布局不定高不定寬垂直居中垂直居中設置或另外設置為垂直居中或上下居中左右居中居中

CSS水平居中和垂直居中 行內元素居中 水平居中

1.給父元素設置text-align:center


    行內元素span居中

2.flex布局
設置父元素display:flex;justify-content:center;


    行內元素span居中

垂直居中

1.父元素高度確定的單行文本(行內元素),可設置line-height等于父元素高度


    坦克

2.父元素高度確定的多行文本(行內元素)
方法一:使用插入 table (包括tbody、tr、td)標簽,同時設置 vertical-align：middle( td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。)




    
    父元素高度確定的多行文本
    




    
    
        
            
                看我是否可以居中。
                看我是否可以居中。
                看我是否可以居中。
                看我是否可以居中。
                看我是否可以居中。

方法二:設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性


    
        坦克
        航母

塊級元素居中 水平居中

1.定寬塊狀元素,設置左右margin值為auto


         坦克
         航母

2.不定寬塊狀元素方法
方法一:加入table標簽,table標簽長度自適應性,即不定義其長度也不默認父元素body的長度(其長度根據其內文本長度決定),可以看做一個定寬的元素,然后利用定寬塊狀居中的margin方法,使其水平居中

方法二:改變塊級元素的 display 為 inline類型(設置為行內元素顯示),然后使用text-align:center來實現居中效果


    
    不定寬塊狀元素水平居中
    



    
        1
        2
        3

方法三:通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。




    
    不定寬塊狀元素水平居中
    




    
        1
        2
        3

垂直居中

1.利用CSS屬性transform:translate(x,y)




    
    垂直居中
    



    垂直居中

2.利用flex布局(不定高不定寬)




    
    垂直居中
    




    垂直居中

3.設置position:absolute或fiexed,另外margin設置為auto




    
    垂直居中
    




    居中

云服務器 GPU云服務器水平垂直居中垂直居中實現垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115819.html

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等，只需給父元素設置即可實現。 1、水平居中水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中這里行內元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設置text-align:center即可實現。 .center{ te...

scwang90 2019-08-30 14:19 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等，只需給父元素設置即可實現。 1、水平居中水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中這里行內元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設置text-align:center即可實現。 .center{ te...

Lsnsh 2019-08-02 10:04 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0