在我们 编写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>

css 宽高自适应的div 元素 如何居中 垂直居中的更多相关文章

  1. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  2. jquery操作html中图片宽高自适应

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...

  3. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  4. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  6. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

  7. css+background实现 图片宽高自适应，拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  8. 翻屏类 h5 适配方案：解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  9. CSS宽高背景介绍

    本萌新还未毕业,在一家外包公司干了一个月,因烦恼日常琐事任务,深感外包之坑,以及上班路途艰辛,特转战erp实施,继写日常随笔,望来日屌丝逆袭,走上人生巅峰. 若有错误,请前辈指点迷津,在下谢过. &l ...

随机推荐

  1. JAVA字符串缓存器全部方法功能及其作用

    不知道干嘛的 serialVersionUID 构造一个没有字符的字符串缓冲区,初始容量为16个字符. StringBuffer() 构造一个没有字符的字符串缓冲区和指定的初始容量. StringBu ...

  2. python开发装饰器的应用

    python全栈开发-Day10 装饰器(闭合函数的应用场)   一. 装饰器 装饰器就是闭包函数的一种应用场景 什么是闭包函数?我们再来回忆一下: 闭包函数: 定义在函数内部的函数,并且该函数包含对 ...

  3. 转载：lua中switch

    刚开始使用lua的人肯定会不满lua居然没有switch这个语法. 但是熟悉lua的强大特性之后,你会发现其实switch是完全没有必要提供的^.^,因为lua有强大的table和function 例 ...

  4. C#添加背景音乐

    <MediaElement Name="audio"/> <Button Name="music" Content="点我有音乐哦& ...

  5. C语言程序设计（基础）- 第7周作业

    为了防止误解,自从本周开始ppt.pta作业.博客作业的命名均与学校教学周一致. 要求一(20经验值) 完成PTA中题目集名为<usth-C语言基础-第七周作业>和<usth-C语言 ...

  6. Bate敏捷冲刺每日报告--day2

    1 团队介绍 团队组成: PM:齐爽爽(258) 小组成员:马帅(248),何健(267),蔡凯峰(285)  Git链接:https://github.com/WHUSE2017/C-team 2 ...

  7. 201621123025《Java程序设计》第1周学习总结

    201621123025<Jave程序设计>第一周学习总结 1.本章学习总结 对于java这门课程,如果不会编码那么会很难学会如何去使用它,而在大一的一二学期的专业课--C语言和数据结构我 ...

  8. 基础篇 - SQL 的约束

    基础篇 - SQL 的约束       约束 一.实验简介 约束是一种限制,它通过对表的行或列的数据做出限制,来确保表的数据的完整性.唯一性.本节实验将在实践操作中熟悉 MySQL 中的几种约束. 二 ...

  9. img加载卡顿，解决办法

    我觉得我在这个项目里遇到了太多的第一次.比如上一篇博文:在在360.UC等浏览器,img不加载原因. 当前情况是:图片加载缓慢,图片加载时出现卡顿. 上图:我缩放了图片,估计有点变形.能说明情况就行, ...

  10. js 点击 返回顶部 动画

    附上效果图 触发前 触发后 HTML代码: CSS代码 JS代码 由于复制文本太丑了 所以直接放的图片  但是我在评论区把js代码又复制了一边 以便你们使用