css居中最佳實踐

BlackFlagBin 發布于2019-08-29 11:02 / 428人閱讀

摘要：居中是非常常見的問題，也是面試熱門，現在對居中問題做個總結水平居中萬能的居中給父元素添加子元素都會居中，無論是還是缺點屬性會繼承會影響后代元素配合缺點以下不兼容，不過低版本微軟自家都不支持了垂直居中單行居中與相等即可達到居中配

css居中是非常常見的問題，也是面試熱門，現在對居中問題做個總結

水平居中 萬能的text-align居中

給父元素添加text-align:　center,子元素都會居中，無論是inline還是block
缺點：text-align屬性會繼承會影響后代元素

display: table配合margin: 0 auto

.center {
    display: table;
    margin: 0 auto;
}

缺點：IE7以下不兼容，不過低版本IE微軟自家都不支持了

垂直居中 line-height單行居中

line-height與height相等即可達到居中

.center{
    height: 100px;
    line-height: 100px;
}

display: table-cell配合vertical

父元素添加display: table,
子元素：

.child{
    display: table-cell;
    vertical-align: middle;
}

后兩種都支持多行文字居中

綜合解決方案 flexbox

給父元素設置display: flex;，水平居中用justify-content: center;,垂直居中設置align-items: center;

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

缺點：兼容不是很好

絕對定位配合transform

父元素設置相對定位

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%, -50%);
}

缺點：低版本IE不兼容
同時這兩種方案也解決了不定寬高居中的問題

參考資料

CSS居中完全指南
CSS之各種居中
Flex布局兼容性

GPU云服務器云服務器最佳實踐 webrtc最佳實踐 cdn最佳實踐 vpc最佳實踐

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

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

《CSS世界》筆記三：內聯元素與對齊

摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...

HtmlCssJs 2019-08-29 16:19 評論0 收藏0
開發H5時背景照片兼容不同手機屏幕處理的最佳實踐

摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統一，這導致在背景圖上的處理相當要注意。設置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。最近在重新做過去常做的翻頁H5，關于背景圖有些新的經驗心得分享。翻頁H5的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統一，這導致在...

MonoLog 2019-08-30 15:55 評論0 收藏0
開發H5時背景照片兼容不同手機屏幕處理的最佳實踐

摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統一，這導致在背景圖上的處理相當要注意。設置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。最近在重新做過去常做的翻頁H5，關于背景圖有些新的經驗心得分享。翻頁H5的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統一，這導致在...

joyvw 2019-08-02 14:14 評論0 收藏0
css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0