資訊專(zhuān)欄INFORMATION COLUMN
摘要：水平和垂直方向都可居中統(tǒng)一代碼相同的代碼抽取絕對(duì)定位注意點(diǎn)生成絕對(duì)定位的元素，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位。等不一定要設(shè)置為，只要和的值相等，即可實(shí)現(xiàn)水平居中。
水平和垂直方向都可居中
統(tǒng)一HTML代碼：
相同的css代碼抽?。?/strong>
.inner{
width: 50px;
height: 50px;
background-color: aqua;
}
.outer{
border: 1px solid black;
}
①、margin:auto && 絕對(duì)定位
.inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.outer{
position: relative;
width:100px;
height: 100px;
}
注意點(diǎn)：②、margin負(fù)值 && 相對(duì)定位
①、absolute生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
inner設(shè)置了absolute定位，所以要在outer設(shè)置relative，這樣才能相對(duì)于outer進(jìn)行相對(duì)定位，否則相對(duì)于body定位，因?yàn)槟J(rèn)是static定位。
left、right等不一定要設(shè)置為0，只要left和right的值相等，即可實(shí)現(xiàn)水平居中。
同理，top和bottom的值相等，即可實(shí)現(xiàn)垂直居中。
.inner{
position: relative;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* 外邊距為自身寬高的一半 */
}
注意點(diǎn)：③、CSS3 transform屬性
①、inner元素要設(shè)為relative
②、margin外邊距為自身寬高的一半（負(fù)數(shù)）
.inner{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意點(diǎn)：④、css3 flex布局
①、inner元素要設(shè)為relative
②、transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換，translate(x,y) 定義 2D 轉(zhuǎn)換
.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;
}
最后在本文末尾還會(huì)提到 定位對(duì)于元素特征的改變
在介紹css元素居中方法之前，我們有必要認(rèn)識(shí)一下元素的三種類(lèi)型
①、塊狀元素： 如div -------- display：block
②、內(nèi)聯(lián)元素： 如span ------display：inline
③、內(nèi)聯(lián)塊元素：如input ---- display：inline-block
塊狀元素特征：
(1)能夠識(shí)別寬高
(2)margin和padding的上下左右均對(duì)其有效
(3)可以自動(dòng)換行
(4)多個(gè)塊狀元素標(biāo)簽寫(xiě)在一起，默認(rèn)排列方式為從上至下
行內(nèi)元素特征：
(1)設(shè)置寬高無(wú)效
(2)對(duì)margin僅設(shè)置左右方向有效，上下無(wú)效；padding設(shè)置上下左右都有效，即會(huì)撐大空間
在IE7的時(shí)候，padding-top 和 padding-bottom無(wú)效
(3)不會(huì)自動(dòng)進(jìn)行換行
行內(nèi)塊狀元素特征：
(1)不自動(dòng)換行
(2)能夠識(shí)別寬高
(3)默認(rèn)排列方式為從左到右
在position設(shè)置為 fixed或者absolute的時(shí)候，元素會(huì)脫離文檔流
*此時(shí)對(duì)于行內(nèi)元素來(lái)說(shuō)可以設(shè)置寬高
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/117228.html
摘要：也就是說(shuō)，較寬的外邊距決定兩個(gè)元素最終離多遠(yuǎn)。盒模型結(jié)論二沒(méi)有設(shè)定屬性的元素始終會(huì)擴(kuò)展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實(shí)現(xiàn)方案固定寬度流動(dòng)彈性。 為文檔添加樣式的三種方法 行內(nèi)樣式 行內(nèi)樣式是寫(xiě)在HTML標(biāo)簽的style屬性里的，比如： Hello Everyone! 行內(nèi)樣式會(huì)覆蓋嵌入樣式和鏈接樣式。 嵌入樣式 嵌入的css樣式是放在HTML文檔...
摘要：至于說(shuō)，，，屬性是脫離文檔流的，這個(gè)估計(jì)也是我們剛開(kāi)始用得最多的，最方便的一個(gè)，同時(shí)也會(huì)給我們帶來(lái)許多問(wèn)題，這一次你會(huì)發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來(lái)，這也是之前主要是用來(lái)做文字環(huán)繞效果有關(guān)。 html 標(biāo)簽 一般在html有塊級(jí)元素和行級(jí)元素，主要的塊級(jí)元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...
摘要：至于說(shuō)，，，屬性是脫離文檔流的，這個(gè)估計(jì)也是我們剛開(kāi)始用得最多的，最方便的一個(gè)，同時(shí)也會(huì)給我們帶來(lái)許多問(wèn)題，這一次你會(huì)發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來(lái)，這也是之前主要是用來(lái)做文字環(huán)繞效果有關(guān)。 html 標(biāo)簽 一般在html有塊級(jí)元素和行級(jí)元素，主要的塊級(jí)元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...
摘要：子選擇器只對(duì)直接后代有影響的選擇器，而對(duì)孫子后代以及多層后代不產(chǎn)生作用。爛透了盡可能使用復(fù)合語(yǔ)法糟糕好的避免不必要的重復(fù)糟糕好的組織好的代碼格式代碼的易讀性和易維護(hù)性成正比。 標(biāo)簽與元素 標(biāo)簽和p元素有什么區(qū)別呢？大多數(shù)時(shí)候他們表示的是同一樣?xùn)|西，但仍有細(xì)微的區(qū)別。、等指的是HTML分隔符，而元素則是由一對(duì)開(kāi)始結(jié)束標(biāo)簽構(gòu)成的，用來(lái)包含某一些內(nèi)容 子選擇器和后代選擇器的區(qū)別： 后代選擇器...
閱讀 1409·2021-10-08 10:05
閱讀 4232·2021-09-22 15:54
閱讀 3157·2021-08-27 16:18
閱讀 3157·2019-08-30 15:55
閱讀 1527·2019-08-29 12:54
閱讀 2803·2019-08-26 11:42
閱讀 633·2019-08-26 11:39
閱讀 2184·2019-08-26 10:11
