一、已知塊級元素的寬和高,使用絕對定位+外邊距設定水平垂直居中。css
父元素position:relative,子元素position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2;css3
效果圖以下chrome
代碼:瀏覽器
<div class="box"> <div class="center-box1"> <p>【第一種方法】知道長和寬,使用絕對定位+外邊距設定水平垂直居中</p> </div> </div> .box { background: #6c94be; width: 100%; height: 450px; position: relative; } .center-box1 { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; width: 200px; height: 200px; background: #5B83AD; }
二、使用css3樣式屬性display:flex設定水平垂直居中,父元素樣式屬性display:flex;子元素使用margin:auto;未知子元素高度的時候依然能夠使用。flex
通常chrome和火狐都能很好地支持。ie不支持spa
效果圖以下:3d
代碼:code
<div class="box"> <div class="center-box2"> <p>【第二種方法】使用css3樣式屬性display:flex設定水平垂直居中</p> </div> </div> .box { background: #6c94be; width: 100%; height: 450px; display: flex; } .center-box2 { margin: auto; width: 200px; background: #5B83AD; }
三、依然使用絕對定位+css3樣式屬性transformorm
transform中translate偏移的百分比值是相對於自身大小的,不管絕對定位元素的尺寸是多少,其都是水平垂直居中顯示的,但問題是兼容性很差。IE9+以及其餘現代瀏覽器才支持。IE9以前版本不支持,在IE8模式下,不居中。blog
效果圖以下:
代碼:
<div class="box"> <div class="center-box3"> <p>【第三種方法】使用css3樣式屬性transform,transform中translate偏移的百分比值是相對於自身大小的</p> </div> </div> .box { background: #6c94be; width: 100%; height: 450px; position: relative; } .center-box3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #5B83AD; width: 200px; }
四、已知塊級元素的寬和高,設置其樣式屬性position:absolute;top:0;left:0;bottom:0;right:0;+margin:auto;
效果圖以下:
代碼:
<div class="box"> <div class="center-box4"> <p>【第四種方法】已知寬和高,絕對定位+margin:auto;</p> </div> </div> .box { background: #6c94be; width: 100%; height: 450px; position: relative; } .center-box4 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 200px; height: 200px; background: #5B83AD; margin: auto; }
未完待續...