css 宽高自适应的div 元素 如何居中 垂直居中
在我們 編寫css 樣式的時候經常會遇見一個問題 那就是一個 寬高未知的元素 要讓他 垂直居中如何實現這個呢 下面是我常用的兩種方法
上代碼
下面的是 結構代碼?
<div class="wrap">//此處為父組件 我們會設置父級的寬高并讓其居中
<div class="center">//子組件我們要實現它的垂直居中 不設置他的寬高 寬高 都由下面的img引入的圖片撐開
<img width="100px" src="img/logo.a68568a.png"/>
</div>
</div>
下面是樣式代碼
.wrap{設置一個居中的外框
width: 500px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
text-align: center;//水平居中
}
.wrap:before{//設置一個寬度為0的偽類為什么要設置這個偽類 起時這個偽類起到了一個對準線的作用
display: inline-block;
content: '';
height: 100%;
width: 0;
vertical-align: middle;//垂直居中
}
.center{//這個時候 在對我們的centerdiv 設置 vertical-align: middle 就可垂直居中了
vertical-align: middle;
display: inline-block;
}
img{
vertical-align: top;
}
?
二 css3 transform解決
.wrap{//一個固定寬高 居中的外框
width: 500px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
.center{//我們的center div 還是寫成inline-block 的樣式
position: relative;
//相對定位 通過相對定位left ?top 值的設置來讓center div 的左上角的位置 為wrap 的中心
//但這個時候我們還不是完全垂直居中 因為我們的center div 本身也有自適應的寬高 這個時候 就要用到transform了
//通過translateX(-50%) translateY(-50%) 讓center 本身在x軸y軸上偏移50% 達到真正的居中（軸心點默認在左上角）
//注意transform各個瀏覽器有不同的前綴并且不兼容ie8 以下
?top: 50%;
?left: 50%;
?display: inline-block;
-webkit-transform: translateX(-50%) translateY(-50%);
}
img{
vertical-align: top;
}
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">document{height: 100%;}html{height: 100%;}body{height: 100%;overflow: hidden;margin: 0;}#bigwrap{width: 100%;height: 100%;text-align: center;}#bigwrap:before{height: 100%;width: 0;vertical-align: middle;content: '';display: inline-block;}.wrap{width: 500px;height: 400px;border: 1px solid black;margin: 0 auto;text-align: center;}.wrap:before{display: inline-block;content: '';height: 100%;width: 0;vertical-align: middle;}.center{vertical-align: middle;display: inline-block;}img{vertical-align: top;}/*.center {? ?position: fixed; ?top: 50%; ?left: 50%; ?background-color: #000; ?width:50%; ?height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}*/</style></head><body><!--<div id="bigwrap">--><div class="wrap"><div class="center"><img width="100px" src="img/logo.a68568a.png"/></div></div></div></body></html>
?
轉載于:https://www.cnblogs.com/YinWeiBlog/p/7518544.html
總結
以上是生活随笔為你收集整理的css 宽高自适应的div 元素 如何居中 垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 勒索软件指向Flash与Silverli
- 下一篇： 外媒：为何说中国对美国科技行业的影响与日