div盒子水平垂直居中方法?
阿新 • • 發佈:2018-12-01
一: 盒子沒有固定的寬和高
1. 在父級元素上面加上上面3句話,就可以實現子元素水平垂直居中。
<div class="wrapper"> 我不知道我的寬度和高是多少,我要實現水平垂直居中。 </div>
.wrapper {
width: 500px;
height: 300px;
background: orange;
color: #fff;
/*只需要在父元素上加這三句*/
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
display: -webkit-flex;
}
2.這是最簡單的方法,不僅能實現絕對居中同樣的效果,也支援聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%) 必須加上top: 50%; left: 50%;
優點:
1.內容可變高度
2.程式碼量少
缺點:
1.ie8不支援
2.屬性需要寫瀏覽器字首
3.可能干擾其他transform效果
4.其他情形下會出現文字或元素邊界渲染模糊的現象
<div class="wrapper">我不知道我的寬度和高是多少,我要實現水平垂直居中。</div>二
.wrapper { padding: 20px; background: orange; color: #fff; position: absolute; top: 50%; left: 50%; border-radius: 5px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
二. 盒子有固定的寬高
方案1. margin 負間距
關鍵點:
1. 必須知道該div的寬和高
2.然後設定位置為絕對定位
3.距離頁面視窗左邊框和上邊框的距離設定為50%,這個50%是指頁面視窗的寬度和高度
4.最後將該div分別左移和上移,左移和上移的大小就是該div寬度和高度的一半
<div class="wrapper">我知道我的寬度和高是多少,我要實現水平垂直居中。</div>
.wrapper { width: 400px; height: 18px; padding: 20px; background: orange; color: #fff; position: absolute; top:50%; left:50%; margin-top: -9px; margin-left: -200px; }
方案2. margin:auto實現絕對定位元素的居中
關鍵點:
1.上下左右均0位置定位
2.margin:auto;
<div class="wrapper">我不知道我的寬度和高是多少,我要實現水平垂直居中。</div>
.wrapper { width: 400px; height: 18px; padding:20px; background: orange; color: #fff; position: absolute; left:0; right:0; top: 0; bottom: 0; margin: auto; }