資訊專欄INFORMATION COLUMN
摘要：居中是非常常見的問題，也是面試熱門，現(xiàn)在對居中問題做個總結(jié)水平居中萬能的居中給父元素添加子元素都會居中，無論是還是缺點屬性會繼承會影響后代元素配合缺點以下不兼容，不過低版本微軟自家都不支持了垂直居中單行居中與相等即可達(dá)到居中配
css居中是非常常見的問題，也是面試熱門，現(xiàn)在對居中問題做個總結(jié)
水平居中 萬能的text-align居中給父元素添加text-align: center,子元素都會居中，無論是inline還是block
缺點：text-align屬性會繼承會影響后代元素
.center {
display: table;
margin: 0 auto;
}
缺點：IE7以下不兼容，不過低版本IE微軟自家都不支持了
垂直居中 line-height單行居中line-height與height相等即可達(dá)到居中
.center{
height: 100px;
line-height: 100px;
}
display: table-cell配合vertical
父元素添加display: table,
子元素：
.child{
display: table-cell;
vertical-align: middle;
}
后兩種都支持多行文字居中
綜合解決方案 flexbox給父元素設(shè)置display: flex;，水平居中用justify-content: center;,垂直居中設(shè)置align-items: center;
.parent{
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
缺點：兼容不是很好
絕對定位配合transform父元素設(shè)置相對定位
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%, -50%);
}
缺點：低版本IE不兼容
同時這兩種方案也解決了不定寬高居中的問題
CSS居中完全指南
CSS之各種居中
Flex布局兼容性
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111383.html
摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...
摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。 最近在重新做過去常做的翻頁H5，關(guān)于背景圖有些新的經(jīng)驗心得分享。 翻頁H5的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在...
摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。 最近在重新做過去常做的翻頁H5，關(guān)于背景圖有些新的經(jīng)驗心得分享。 翻頁H5的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在...
摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進(jìn)行編程個技巧前端掘金并不總是容易處理。 CSS3 實現(xiàn)文字流光漸變動畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現(xiàn)了一下，順便...
閱讀 3812·2021-10-13 09:40
閱讀 3262·2021-10-09 09:53
閱讀 3638·2021-09-26 09:46
閱讀 1925·2021-09-08 09:36
閱讀 4351·2021-09-02 09:46
閱讀 1372·2019-08-30 15:54
閱讀 3246·2019-08-30 15:44
閱讀 1090·2019-08-30 11:06
