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

資訊專欄INFORMATION COLUMN

css元素居中方法歸納

Xufc / 3117人閱讀

摘要：水平和垂直方向都可居中統(tǒng)一代碼相同的代碼抽取絕對定位注意點生成絕對定位的元素，相對于定位以外的第一個父元素進行定位。等不一定要設(shè)置為，只要和的值相等，即可實現(xiàn)水平居中。

水平和垂直方向都可居中

統(tǒng)一HTML代碼：

相同的css代碼抽?。?/strong>

.inner{
    width: 50px;
    height: 50px;
    background-color: aqua;
}
.outer{
    border: 1px solid black; 
}
①、margin:auto && 絕對定位 
.inner{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.outer{
    position: relative;
    width:100px;
    height: 100px;
}
注意點： 
①、absolute生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 
inner設(shè)置了absolute定位，所以要在outer設(shè)置relative，這樣才能相對于outer進行相對定位，否則相對于body定位，因為默認是static定位。
left、right等不一定要設(shè)置為0，只要left和right的值相等，即可實現(xiàn)水平居中。
同理，top和bottom的值相等，即可實現(xiàn)垂直居中。
②、margin負值 && 相對定位 
 .inner{
    position: relative;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;         /* 外邊距為自身寬高的一半 */ 
}
注意點： 
①、inner元素要設(shè)為relative
②、margin外邊距為自身寬高的一半（負數(shù)）
③、CSS3 transform屬性 
.inner{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
注意點： 
①、inner元素要設(shè)為relative
②、transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換，translate(x,y)    定義 2D 轉(zhuǎn)換
④、css3 flex布局 
.outer{
    display: flex;
    align-items: center;         /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
}
僅水平方法居中的方法 ①、margin: 0 auto 
.inner{
    margin: 0 auto;
}
②、text-align: center 
.outer{
    text-align: center;
}
.inner{
    display: inline-block;
}

最后在本文末尾還會提到 定位對于元素特征的改變
在介紹css元素居中方法之前，我們有必要認識一下元素的三種類型

html元素有三種類型： 
①、塊狀元素： 如div -------- display：block  
②、內(nèi)聯(lián)元素： 如span ------display：inline  
③、內(nèi)聯(lián)塊元素：如input ---- display：inline-block

塊狀元素特征：
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下

行內(nèi)元素特征：
(1)設(shè)置寬高無效
(2)對margin僅設(shè)置左右方向有效，上下無效；padding設(shè)置上下左右都有效，即會撐大空間
在IE7的時候，padding-top 和 padding-bottom無效
(3)不會自動進行換行

行內(nèi)塊狀元素特征：
(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式為從左到右

在position設(shè)置為 fixed或者absolute的時候，元素會脫離文檔流
*此時對于行內(nèi)元素來說可以設(shè)置寬高

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

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

相關(guān)文章

  • css學習歸納總結(jié)（三）

    摘要：也就是說，較寬的外邊距決定兩個元素最終離多遠。盒模型結(jié)論二沒有設(shè)定屬性的元素始終會擴展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實現(xiàn)方案固定寬度流動彈性。 為文檔添加樣式的三種方法 行內(nèi)樣式 行內(nèi)樣式是寫在HTML標簽的style屬性里的，比如： Hello Everyone! 行內(nèi)樣式會覆蓋嵌入樣式和鏈接樣式。 嵌入樣式 嵌入的css樣式是放在HTML文檔...

    Drummor 評論0 收藏0

  • CSS之元素居中

    摘要：多個塊級元素按行放置將塊級元素設(shè)置為行內(nèi)元素父元素內(nèi)容居中。塊級元素使用絕對定位。需要知道子元素的高度。水平垂直居中思路跟之前一樣。 水平方向 行內(nèi)元素 .center-children { text-align: center; } 適用于行內(nèi)元素，行內(nèi)塊元素。 塊級元素 .center-children { margin: 0 auto; } margin左右設(shè)置為auto...

    wapeyang 評論0 收藏0

  • html和css常見的一些問題總結(jié)

    摘要：至于說，，，屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，這一次你會發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來，這也是之前主要是用來做文字環(huán)繞效果有關(guān)。 html 標簽 一般在html有塊級元素和行級元素，主要的塊級元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

    EddieChan 評論0 收藏0

  • html和css常見的一些問題總結(jié)

    摘要：至于說，，，屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，這一次你會發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來，這也是之前主要是用來做文字環(huán)繞效果有關(guān)。 html 標簽 一般在html有塊級元素和行級元素，主要的塊級元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

    chadLi 評論0 收藏0

  • css學習歸納總結(jié)（二）

    摘要：子選擇器只對直接后代有影響的選擇器，而對孫子后代以及多層后代不產(chǎn)生作用。爛透了盡可能使用復(fù)合語法糟糕好的避免不必要的重復(fù)糟糕好的組織好的代碼格式代碼的易讀性和易維護性成正比。 標簽與元素 標簽和p元素有什么區(qū)別呢？大多數(shù)時候他們表示的是同一樣東西，但仍有細微的區(qū)別。、等指的是HTML分隔符，而元素則是由一對開始結(jié)束標簽構(gòu)成的，用來包含某一些內(nèi)容 子選擇器和后代選擇器的區(qū)別： 后代選擇器...

    KnewOne 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<