css 寬高自適應的div 元素如何居中垂直居中

時間 2019-11-17

標籤 css 自適應 div 元素如何居中垂直欄目 CSS 简体版

原文原文鏈接

在咱們編寫css 樣式的時候常常會碰見一個問題那就是一個寬高未知的元素要讓他垂直居中如何實現這個呢下面是我經常使用的兩種方法css

上代碼html

　　下面的是結構代碼 css3

　　<div class="wrap">//此處爲父組件咱們會設置父級的寬高並讓其居中web

　　<div class="center">//子組件咱們要實現它的垂直居中不設置他的寬高寬高都由下面的img引入的圖片撐開瀏覽器

　　<img width="100px" src="img/logo.a68568a.png"/>spa

　　</div>orm

　　</div>htm

　　下面是樣式代碼圖片

　　　　　　　.wrap{設置一個居中的外框utf-8

　　　　　　　　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 class="wrap"><div class="center"><img width="100px" src="img/logo.a68568a.png"/></div></div></div></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

css 寬高自適應的div 元素 如何居中 垂直居中

css 寬高自適應的div 元素如何居中垂直居中