css 宽高自适应的div 元素 如何居中 垂直居中
来源:互联网 发布:网络事件 2017 编辑:程序博客网 时间:2024/06/05 15:51
在我们 编写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 >--><div class="wrap"><div class="center"><img width="100px" src="img/logo.a68568a.png"/></div></div></div></body></html>
- css 宽高自适应的div 元素 如何居中 垂直居中
- css 宽高自适应的div 元素 如何居中 垂直居中
- CSS实现已知宽高的div垂直居中;自适应高度两列布局
- CSS自适应高度的div垂直水平居中
- 图片自适应div高宽并且垂直居中
- css的div垂直居中
- 如何让div水平居中以及垂直居中,在宽高不定的情况下
- div宽高度不限自适应,如何垂直水平居中
- div内的元素垂直居中css样式
- css div垂直居中
- CSS div垂直居中
- css垂直居中--div
- css div垂直居中
- css:div垂直居中
- CSS 元素垂直居中
- css元素垂直居中
- css3 如何让div里面的元素垂直居中
- DIV+CSS如何让文字垂直居中
- 2017.9.14 星际竞速 失败总结
- RxJava学习
- 栈的应用----判断括号是否匹配
- 入门指南:如何设置您的第一台服务器
- WARN: Establishing SSL connection without server's identity verification is not recommended. Accordi
- css 宽高自适应的div 元素 如何居中 垂直居中
- ASP.NET MVC4 入门简介
- 2017 ACM-ICPC乌鲁木齐网络赛 B. Out-out-control cars【计算几何||判断射线与线段是否相交】
- 薪水涨幅查询
- 数据库视频总结
- N
- UE4 连接自定义服务器
- Flume+Kafka环境构建和实战
- 关于AFUrlSessionManager下载文件报The file couldn’t be opened because the specified URL type isn’t support问题