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 元素如何居中垂直居中