国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS垂直居中和水平居中

fredshare / 3608人閱讀

摘要：前言總括居中一直是一個(gè)比較敏感的話題，為了以后開(kāi)發(fā)的方便，樓主覺(jué)得確實(shí)需要總結(jié)一下了，總的來(lái)說(shuō)，居中問(wèn)題分為垂直居中和水平居中，實(shí)際上水平居中是很簡(jiǎn)單的，但垂直居中的方式和方法就千奇百怪了。

前言

總括： CSS居中一直是一個(gè)比較敏感的話題，為了以后開(kāi)發(fā)的方便，樓主覺(jué)得確實(shí)需要總結(jié)一下了，總的來(lái)說(shuō)，居中問(wèn)題分為垂直居中和水平居中，實(shí)際上水平居中是很簡(jiǎn)單的，但垂直居中的方式和方法就千奇百怪了。

原文地址：CSS居中小談

知乎專欄&&簡(jiǎn)書(shū)專題：前端進(jìn)擊者（知乎）&&前端進(jìn)擊者（簡(jiǎn)書(shū)）

博主博客地址：Damonare的個(gè)人博客

人生用物，各有天限；夏澇太多，必有秋旱。

正文 內(nèi)聯(lián)元素居中方案

水平居中設(shè)置：

行內(nèi)元素 設(shè)置 text-align:center；

Flex布局 設(shè)置display:flex;justify-content:center;(靈活運(yùn)用)

垂直居中設(shè)置：

父元素高度確定的單行文本（內(nèi)聯(lián)元素） 設(shè)置 height = line-height；

父元素高度確定的多行文本（內(nèi)聯(lián)元素） a:插入 table （插入方法和水平居中一樣），然后設(shè)置 vertical-align:middle； b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle；

## 塊級(jí)元素居中方案

水平居中設(shè)置：

定寬塊狀元素 設(shè)置 左右 margin 值為 auto；

不定寬塊狀元素 a:在元素外加入 table 標(biāo)簽（完整的，包括 table、tbody、tr、td），該元素寫(xiě)在 td 內(nèi)，然后設(shè)置 margin 的值為 auto； b:給該元素設(shè)置 display:inine 方法； c:父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:50%；

垂直居中設(shè)置：

1.使用position:absolute（fixed）,設(shè)置left、top、margin-left、margin-top的屬性;

.box{
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}

2.利用position:fixed（absolute）屬性，margin:auto這個(gè)必須不要忘記了;

.box{
    position: absolute;或fixed
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

3.利用display:table-cell屬性使內(nèi)容垂直居中,這個(gè)方法在多行文字居中的時(shí)候用的比較多;

HTML代碼：


    多行文字，此處居中設(shè)置

CSS代碼：

.box{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:100px;
    height:120px;
    background:purple;
}
.box span{
    display: inline-block;
    vertical-align: middle;
}

4.使用css3的新屬性transform:translate(x,y)屬性;

.box{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
}

5.最高大上的一種，使用before，after偽元素;

HTML代碼：


    

        垂直居中

CSS代碼：

.box{
    position:fixed;
    display:block;
    background:rgba(0,0,0,.5);
}
.box:before{
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.box:after{
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.box .content{
    width:60px;
    height:60px;
    line-height:60px;
    color:red;
}

6.Flex布局;

.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    水平居中
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
     垂直居中
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-align:center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}
結(jié)語(yǔ) 
博主暫時(shí)掌握了這些居中方法，讀者如果還有好方法或是覺(jué)得那個(gè)地方不對(duì)，歡迎評(píng)論，不吝感謝。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115135.html

相關(guān)文章

  • CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

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

    cc17 評(píng)論0 收藏0

  • CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

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

    AlienZHOU 評(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 評(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 評(píng)論0 收藏0

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

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

    Apollo 評(píng)論0 收藏0

  • 【前端】這可能是你看過(guò)最全的css居中解決方案了~

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

    csRyan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

fredshare

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<