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 元素 如何居中 垂直居中相关推荐
- 从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...
- css宽高自适应布局,实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
- css控制图片拉伸不变形,css+background实现 图片宽高自适应,拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
- 【CSS笔记】CSS设置元素堆叠顺序、元素宽高自适应、calc数学函数
目录 一.堆叠顺序 1.1.默认堆叠顺序 1.2.设置堆叠顺序 二.宽高自适应
- css 百分比 怎么固定正方形_css样式写出三角形,宽高自适应的正方形,扇形!...
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <! 实现它的原理那就要弄明白border属性, border是一个复合属性 borde ...
- CSS 垂直居中、水平居中及流失布局宽高自适应
CSS 垂直居中.水平居中及流失布局宽高自适应,在工作中,经常遇到某个元素如何居中,因此介绍一种简单的居中方式.同时,也经常遇到,上到下布局,当顶部动态变化时,及高度不固定,但是底部如何动态铺满父元素 ...
- CSS学习笔记八——宽高自适应
宽高自适应 一.宽度自适应 二.高度自适应 三.浮动元素的高度自适应 四.窗口自适应 五.结语 一.宽度自适应 不写宽度或者写 width:auto就表示宽度自适应,可用于横栏或导航栏. 与 widt ...
- 宽高自适应_css样式写出三角形,宽高自适应的正方形,扇形!
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <!DOCTYPE html> <html> <head> ...
- 宽高自适应下的导航栏文本居中
导航栏是网页中必不可少的一部分,固定的宽高可以直接写给元素,但是不同的分辨率之下,可能会出现滚动条或者空白,所以就需要使用宽高自适应的方式,让导航栏更加灵活的适应网页. 例: 导航栏 宽1000px ...
最新文章
- SyntaxError: (unicode error) ‘unicodeescape‘ codec can‘t decode bytes in positio n 131-135: truncate
- 做项目遇到问题 2 AWS NLP 剽窃RuntimeError: size mismatch, m1: [10 x 3], m2: [2 x 10]检测部署报错
- 把数据保存到cook_将用户信息保存到Cookie中
- 华农保险 × 神策数据 OpenDay:保险如何从 0 到 1 落地数字化转型?
- pytorch 1.7.x训练保存的模型在1.4低版本无法加载
- 【HDU - 5009】Paint Pearls(dp,链表优化dp)
- java上三角数组_二维数组的三角填充 两种java实现的方法
- 新建站点的mysql数据库_lAMP下新建维护站点全过程
- 使用Quartz实现定时任务
- 不差钱!华为,给学生开百万年薪
- 7z文件格式及其源码的分析(三)
- SUST_2018 焦作站亚洲区域赛校内选拔赛题解
- 有鱼上钩!修改游戏数据前的准备
- iphonex 测试电池软件,iOS11.3Beta5推送:支持电池检测、AR表情,建议iPhoneX用户升级...
- oppo官解root,OPPO官解工具
- Eye Diagram眼图测量
- JVM -XX:MaxDirectMemorySize
- Google Maps Android API
- 美政府UFO报告,称无法解释144起UFO事件中的143起
- g++: 找不到 ‘cc1plus‘ 的解决办法