css元素居中方法歸納

Xufc 發布于2019-08-30 15:55 / 3106人閱讀

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

水平和垂直方向都可居中

統一HTML代碼：

相同的css代碼抽取：

.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設置了absolute定位，所以要在outer設置relative，這樣才能相對于outer進行相對定位，否則相對于body定位，因為默認是static定位。
left、right等不一定要設置為0，只要left和right的值相等，即可實現水平居中。
同理，top和bottom的值相等，即可實現垂直居中。

②、margin負值 && 相對定位

 .inner{
    position: relative;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;         /* 外邊距為自身寬高的一半 */ 
}

注意點： 
①、inner元素要設為relative
②、margin外邊距為自身寬高的一半（負數）

③、CSS3 transform屬性

.inner{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

注意點： 
①、inner元素要設為relative
②、transform 屬性向元素應用 2D 或 3D 轉換，translate(x,y)    定義 2D 轉換

④、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  
②、內聯元素： 如span ------display：inline  
③、內聯塊元素：如input ---- display：inline-block

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

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

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

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

GPU云服務器云服務器 html居中浮動元素 html居中css css元素 java插入元素方法

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

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

css學習歸納總結（三）

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

Drummor 2019-08-28 18:01 評論0 收藏0
CSS之元素居中

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

wapeyang 2019-08-30 13:20 評論0 收藏0
html和css常見的一些問題總結

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

EddieChan 2019-08-30 12:53 評論0 收藏0
html和css常見的一些問題總結

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

chadLi 2019-08-01 15:09 評論0 收藏0
css學習歸納總結（二）

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

KnewOne 2019-08-28 18:00 評論0 收藏0