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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS 图文并茂的带你了解深拷贝与浅拷贝

一、概念与总结 1、浅拷贝 浅拷贝就是对内存地址的复制&#xff0c;让目标对象指针和源对象指向同一片内存空间&#xff0c;当内存销毁的时候&#xff0c;指向这片内存的几个指针需要重新定义才可以使用&#xff0c;要不然会成为野指针。 浅拷贝就是拷贝指向原来对象的指针&…

使用Byteman和JUnit进行故障注入

我们的应用程序独立存在的时间已经很久了。 如今&#xff0c;应用程序是一种非常复杂的野兽&#xff0c;它们使用无数的API和协议相互通信&#xff0c;将数据存储在传统或NoSQL数据库中&#xff0c;通过网络发送消息和事件……例如&#xff0c;如果考虑到数据库&#xff0c;您会…

Ambari Views的自定义

下载ambari源码&#xff0c; ambari-views/examples/ 下面有很多例子&#xff0c;直接编译是不会成功的&#xff0c; 因为每一个例子项目都需要一个依赖 <dependency><groupId>org.apache.ambari</groupId><artifactId>ambari-views</artifactId>…

angular使用sass的scss语法

一、现象 为了简写样式 二、解决 1、安装sass ,利用npm 安装(npm工具如果没有&#xff0c;请先自行安装好) &#xff08;1&#xff09;、npm install node-sass --save-dev &#xff08;2&#xff09;、npm install sass-loader --save-dev 2、修改.angular-cli.json文件 …

linux 查看java cpu_Linux查看CPU和内存使用情况

在系统维护的过程中&#xff0c;随时可能有需要查看 CPU 使用率&#xff0c;并根据相应信息分析系统状况的需要。在 CentOS 中&#xff0c;可以通过 top 命令来查看 CPU 使用状况。运行 top 命令后&#xff0c;CPU 使用状态会以全屏的方式显示&#xff0c;并且会处在对话的模式…

TCP浅谈为什么3次握手

《计算机网络》中的例子是这样的&#xff0c;“已失效的连接请求报文段”的产生在这样一种情况&#xff1a;客户发出的第一个连接请求报文段并没有丢失&#xff0c;而是在某个网络结点长时间的滞留了&#xff0c;以致延误到连接释放以后的某个时间才到达服务。 本来这是一个早已…

Arrays.sort与Arrays.parallelSort

我们都使用Arrays.sort对对象和原始数组进行排序。 该API在下面使用合并排序或Tim排序对内容进行排序&#xff0c;如下所示&#xff1a; public static void sort(Object[] a) {if (LegacyMergeSort.userRequested)legacyMergeSort(a);elseComparableTimSort.sort(a); }即使合…

了解ASP.NET MVC的基本架构

MVC&#xff0c;Model – View – Controller 的简写 Model 封装业务逻辑相关的数据及对数据的处理方法 View 向用户提供交互界面 Controller 负责控制Model和View 首先建立一个模板 在这里发现了一个问题&#xff08;好像vs12没有模板&#xff0c;建不出来&#xff09; 其…

Google Chrome 浏览器JS无法更新解决办法

JS无法更新原因&#xff1a; 浏览器为了加载快&#xff0c;默认是按照自定规则更新缓存&#xff0c;非实时更新。 我们在开发的时候&#xff0c;JS变动很快&#xff0c;需要即时让浏览器加载最新文件&#xff0c;也就是禁用浏览器缓存 &#xff08;1&#xff09;使用F12进入…

HDU3415 Max Sum of Max-K-sub-sequence

题意given a circle sequence A[1],A[2],A[3]......A[n]. Circle sequence means the left neighbour of A[1] is A[n] , and the right neighbour of A[n] is A[1]. Now your job is to calculate the max sum of a Max-K-sub-sequence. Max-K-sub-sequence means a continuou…

Spring:自动接线或不自动接线

从使用Spring 2.5开始&#xff0c;我从基于XML的应用程序上下文切换到了注释。 尽管我发现那些非常有用且节省大量时间的人&#xff0c;但我始终觉得在灵活性方面我失去了一些东西。 特别是Autowired批注-或标准Inject-在我看来就像新的“新”&#xff0c;增加了类之间的耦合&a…

刷题总结——Cut the Sequence(POJ 3017 dp+单调队列+set)

题目&#xff1a; Description Given an integer sequence { an } of length N, you are to cut the sequence into several parts every one of which is a consecutive subsequence of the original sequence. Every part must satisfy that the sum of the integers in the …

java crud事件回调_java回调机制 - 神是到着念的个人空间 - OSCHINA - 中文开源技术交流社区...

软件模块之间总是存在着一定的接口&#xff0c;从调用方式上&#xff0c;可以把他们分为三类&#xff1a;同步调用、回调和异步调用。同步调用是一种阻塞式调用&#xff0c;调用方要等待对方执行完毕才返回&#xff0c;它是一种单向调用&#xff1b;回调是一种双向调用模式&…

CSS盒子的浮动

在标准流中&#xff0c;一个块级元素在水平方向会自动伸展&#xff0c;直到包含它的元素的边界&#xff1b;而在竖直方向和兄弟元素依次排列&#xff0c;不能并排。使用“浮动”方式后&#xff0c;块级元素的表现就会有所不同。 CSS中有一个float属性&#xff0c;默认为no…

servlet中url-pattern之/与/*的区别

转载于:https://www.cnblogs.com/hwgok/p/8835350.html

很少使用“ ControlFlowException”

控制流是命令式编程的“遗留物”&#xff0c;它已泄漏到其他各种编程范例中&#xff0c;包括Java的面向对象范例 。 除了有用的和无处不在的分支和循环结构外&#xff0c;还包括原语&#xff08;例如GOTO&#xff09;和非局部变量&#xff08;例如异常&#xff09;。 让我们仔细…

java的if里有多个if_代码里写很多if会影响效率吗?

看你怎么写 if.嵌入很多层if的代码叫做“箭头代码”&#xff0c;是一个anti-pattern。 这种代码会增加程序的循环复杂度 (Cyclomatic complexity)具体可以看这里&#xff1a;Flattening Arrow Code这里&#xff1a;总的来说&#xff0c;程序里用if-else是有开销的。每次conditi…

python基础总结(6)

一、模块。 一个模块就是一个python文件&#xff0c;.py文件。 需要注意的是&#xff1a;自己创建模块时要注意命名&#xff0c;不能和Python自带的模块名称冲突。例如&#xff0c;系统自带了sys模块&#xff0c;自己的模块就不可命名为sys.py&#xff0c;否则将无法导入系统自…

[10.10模拟] water

题意&#xff1a; 有一块矩形土地被划分成 n*m 个正方形小块。这些小块高低不平,每一小块都有自己的高度。水流可以由任意一块地流向周围四个方向的四块地中,但是不能直接流入对角相连的小块中。一场大雨后,由于地势高不同,许多地方都积存了不少降水。给定每个小块的高度,求每个…

使用Amazon Web Services(EC2)

正如我上周参加技术动手AWS培训之前所发布的。 这些天的课程当然是我以前使用过的标准EC2和S3服务。 除此之外&#xff0c;我们还使用了RDS &#xff0c; Elastic Load Balancing &#xff0c; SNS和VPC &#xff0c; Elastic Beanstalk并讨论了许多术语和业务案例。 在本文中&…