在我们 编写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. svn 要求commit提交必须加注释（日志） hook

    #vim /data/svn/mysvn/hook/pre-commit #!/bin/bashREPOS="$1"TXN="$2" #RES="OK ...

  2. 如何使用 RESTClient 调试微信支付接口

    我们知道微信支付使用http协议进行api调用,body 使用xml格式,使用的一般http在线调试工具,无法进行xml数据的post. RESTClient 做的很好,支持各种http 方法,bod ...

  3. Java并发编程实战（chapter_2）（对象发布、不变性、设计线程安全类）

    一.发布与溢出 "发布(Publish)"一个对象的意思是指,使对象能够在当前作用于之外的代码中使用.这个"之外",尤为关键,各种出问题的地方,都是因为这个&q ...

  4. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  5. [福大软工] W班 总成绩排行榜

    评分链接 作业1   作业2    作业3    作业4 总分排名

  6. C++数据结构中的基本算法排序

    冒泡排序 基本思想:两两比较待排序的数,发现反序时交换,直到没有反序为止. public static void BubbleSort(int[] R) { for (int i = 0; i < ...

  7. 浅谈数据结构vector

    vector: 又名 向量 1.C++中的一种数据结构. 2.是一个类. 3.相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. A.使用时, ...

  8. 利用Node的chokidar 监听文件改变的文件。

    最近维护一个项目.每次改完东西,都要上传到服务器.然后有时候就忘记一些东西,于是就想有没有可以方法能监听文件的改变.然后我再利用程序把更改的文件一键上传到服务器. 于是就找到了nodejs 的chok ...

  9. Python format 格式化函数

    str.format() 格式化字符串的函数 str.format(),它增强了字符串格式化的功能. 基本语法是通过 {} 和 : 来代替以前的 % format 函数可以接受不限个参数,位置可以不按 ...

  10. Linq GroupJoin

    static void Main(string[] args) { List<Person> persons = new List<Person> { }, }, }; Lis ...