水平垂直居中

incredible 發(fā)布于2019-08-30 12:43 / 2677人閱讀

摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動(dòng)端一般使用方案在移動(dòng)端都可以使用文本水平垂直居中文本垂直文本垂直居中移動(dòng)端水平垂直居中垂直居中方案快級(jí)元素

筆記整理之一：水平垂直居中

PC固定寬高、一般使用maring負(fù)值進(jìn)行居中
PC不固定寬高、一般使用relative和left進(jìn)行

下面三種方案平常都很少被使用的到
    verticle-align: middle;
    display: table-cell;
    top:0; right:0; bottom:0; left:0;

移動(dòng)端一般使用（PC方案在移動(dòng)端都可以使用）

transform: translate(-50%,-50%);
display: flex; justify-content: center; align-items: center;

文本水平垂直居中




    
    文本垂直
    



    文本垂直居中

移動(dòng)端水平垂直居中

1、 CSS3垂直居中方案




    
    快級(jí)元素水平垂直居中(不固定寬高)
    



    
        transform: translate(-50%,-50%);居中方案

2、flex居中方案




    
    flex水平垂直居中
    



    flex水平垂直居中

PC端水平垂直居中

1、快級(jí)元素水平垂直居中(固定寬高、最常用)




    
    水平、垂直居中
    



    快級(jí)元素水平垂直居中(固定寬高)

4、快級(jí)元素水平垂直居中(不固定寬高)




    
    快級(jí)元素水平垂直居中(不固定寬高)
    



    
        快級(jí)元素水平垂直居中(不固定寬高)

2、絕對(duì)定位居中（禁IE6、7）




    
    絕對(duì)定位水平垂直居中
    



    絕對(duì)定位水平垂直居中

3、非快級(jí)元素水平垂直居中（vertical-align: middle禁IE6、7、8）




    
    非快級(jí)元素水平垂直居中

5、table-cell水平垂直居中




    
    絕對(duì)定位水平垂直居中
    



    
        絕對(duì)定位水平垂直居中

云服務(wù)器 GPU云服務(wù)器水平垂直居中垂直居中實(shí)現(xiàn)垂直居中文字垂直居中

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115013.html

相關(guān)文章

水平居中、垂直居中、水平垂直居中、浮動(dòng)居中、絕對(duì)定位居中.......幫你搞定

摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素絕對(duì)定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個(gè)元素？你會(huì)想到啥？這里面的知識(shí)還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素、絕對(duì)定位的居中。為了代碼簡(jiǎn)介，沒(méi)有加背景和其他樣式，需要看效果的，可以加上背景。目錄：第一...

waterc 2019-08-29 15:32 評(píng)論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

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

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

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

Lsnsh 2019-08-02 10:04 評(píng)論0 收藏0
水平垂直居中

摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動(dòng)端一般使用方案在移動(dòng)端都可以使用文本水平垂直居中文本垂直文本垂直居中移動(dòng)端水平垂直居中垂直居中方案快級(jí)元素筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負(fù)值進(jìn)行居中PC不固定寬高、一般使用relative和left進(jìn)行下面三種方案平常都很少被使用的到 ...

eechen 2019-08-01 14:54 評(píng)論0 收藏0
【第1期】聊聊css居中那點(diǎn)事

摘要：前言居中是網(wǎng)頁(yè)布局中再常見(jiàn)不過(guò)的一種方式了，今天我們就來(lái)聊聊居中的那點(diǎn)事。我是水平居中的同樣是針對(duì)塊級(jí)元素才有效果。來(lái)看代碼我是水平居中的必須配合來(lái)使用來(lái)可以實(shí)現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問(wèn)題。前言：居中是網(wǎng)頁(yè)布局中再常見(jiàn)不過(guò)的一種方式了，今天我們就來(lái)聊聊css居中的那點(diǎn)事。我們主要從這幾個(gè)方面來(lái)了解下居中：水平居中垂直居中水平垂直居中水平...

劉永祥 2019-08-30 15:55 評(píng)論0 收藏0