資訊專欄INFORMATION COLUMN
摘要：一如果是已知寬高的元素做水平垂直居中效果的話，可以直接用具體的數(shù)值指定定位布局或偏移布局，這個(gè)就不過(guò)多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實(shí)現(xiàn)方式。
一、如果是已知寬高的元素做水平/垂直居中效果的話，可以直接用具體的數(shù)值指定定位布局或偏移布局，這個(gè)就不過(guò)多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實(shí)現(xiàn)方式。
二、
1.table表格法
思路：顯示設(shè)置父元素為：table，子元素為：cell-table，vertical-align: center
優(yōu)點(diǎn)：父元素（parent）可以動(dòng)態(tài)的改變高度（table元素的特性）
缺點(diǎn)：IE8以下不支持
代碼實(shí)現(xiàn)：
.parent1{
display: table;
height:300px;
width: 300px;
background-color: red;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}
hello world-1
效果：
2.空元素法
思路：使用一個(gè)空標(biāo)簽span設(shè)置他的vertical-align基準(zhǔn)線為中間，并且讓他為inline-block，寬度為0
缺點(diǎn)：多了一個(gè)沒(méi)用的空標(biāo)簽，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。當(dāng)然也可以使用偽元素來(lái)代替span標(biāo)簽，不過(guò)IE支持也不好
hello world-2
效果：
3.-50%定位法
思路：子元素絕對(duì)定位，距離頂部 50%，左邊50%，然后使用css3 transform:translate(-50%; -50%)
優(yōu)點(diǎn)：高大上,可以在webkit內(nèi)核的瀏覽器中使用
缺點(diǎn)：不支持IE9以下不支持transform屬性
代碼實(shí)現(xiàn)
hello world-3
效果：
4.思路：使用css3 flex布局法
優(yōu)點(diǎn)：簡(jiǎn)單 快捷
缺點(diǎn)：低端pc瀏覽器和低版本的安卓設(shè)備不支持，不過(guò)現(xiàn)在應(yīng)該很少用了
代碼實(shí)現(xiàn)：
hello world-4
效果：
5.絕對(duì)定位法
思路：父元素使用定位（相對(duì)/絕對(duì)都行），子元素設(shè)置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;
優(yōu)點(diǎn)：兼容性好，父元素寬高可變，使用非常靈活，在做全屏居中的時(shí)候很好
缺點(diǎn)：子元素還是要指定寬高，可以用百分比
代碼實(shí)現(xiàn)
.parent5{
position:absolute;
width: 300px;
height:300px;
background: red;
}
.parent5 .child{
color:#fff;
margin: auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
width:50%;
height:20%;
}
hello world-5
效果：
三、在追逐性能時(shí)代，現(xiàn)在基本都是webkit內(nèi)核了，擁抱css3彈性布局，個(gè)人比較推薦用4、5方法，4.flex布局法適合在局部使用。5.絕對(duì)定位法適合在全屏場(chǎng)景使用，比如彈框中。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114862.html
摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...
摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...
摘要：如果我們直接可以計(jì)算出正確的和值，豈不是一次到位函數(shù)正有此功能，當(dāng)然我們需要知道子元素的寬高效果是一個(gè)作用于內(nèi)聯(lián)元素的屬性。內(nèi)聯(lián)元素的特性是會(huì)和其它內(nèi)聯(lián)元素或者文字在同一行顯示，但是默認(rèn)情況下是與父元素基線對(duì)齊的。 ??CSS控制居中是前端開(kāi)發(fā)中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...
摘要：水平居中水平居中可分為行內(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...
摘要：水平居中水平居中可分為行內(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...
摘要：為了更好的加深對(duì)居中的理解，搜集和閱讀相關(guān)資料，發(fā)現(xiàn)不錯(cuò)的文章將其整理出來(lái)。 在學(xué)習(xí)前端的過(guò)程中，發(fā)現(xiàn)元素和文本的水平居中和垂直居中，是經(jīng)常會(huì)出現(xiàn)的問(wèn)題，在實(shí)際工作中也會(huì)經(jīng)常碰到。居中的技巧有很多，但在編寫(xiě)代碼的過(guò)程中，發(fā)現(xiàn)有時(shí)候技巧管用，有時(shí)候不管用，于是就將每個(gè)知道的方案都試一遍，找到合適的。這種情況究其原因是對(duì)居中的認(rèn)識(shí)不夠深入，只是停留在實(shí)現(xiàn)需求的水平上。為了更好的加深對(duì)居中的...
閱讀 1019·2021-09-29 09:35
閱讀 1325·2021-09-28 09:36
閱讀 1612·2021-09-24 10:38
閱讀 1157·2021-09-10 11:18
閱讀 704·2019-08-30 15:54
閱讀 2577·2019-08-30 13:22
閱讀 2028·2019-08-30 11:14
閱讀 777·2019-08-29 12:35
