css实现定高的元素在不定高的容器中水平垂直居中（兼容IE8及以上）
容器设置相对定位
元素设置宽高，并使用绝对定位，上下左右值均为0，margin：auto
如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.cc{
height:500px;
width:200px;
text-align:center;
background:#ccc;
position:relative;
}
.cc div{
width:100px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
height:100px;
background:#f1ab44;
margin:auto;
}
.cc div img{
width:100%;
}
</style>
</head>
<body>
<div class="cc">
<div>
<img src="data:images/ct-logo-new.png"/>
</div>
</div>
</body>
</html>
css实现定高的元素在不定高的容器中水平垂直居中（兼容IE8及以上）的更多相关文章
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- span(行级元素)在不定高的div(块级元素)中垂直居中的方法
设置父级元素: align-items: center; display: flex;
- css实现高度不固定的div元素模块在页面中水平垂直居中
<!DOCTYPE html><html> <head> <title>Laravel</title> <link ...
- css如何让子元素在父元素中水平垂直居中
方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 【div+css】两个div，如何让内层的div在外层div中水平垂直居中
好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- css进阶 04-如何让一个元素水平垂直居中？
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
随机推荐
- js中的this，call及apply
在前端网看了这么一篇文章,觉得讲得还不错,不深入但易懂,所以我这里把这个经典的问题也记下来. 1:声明式函数与定义函数表达式 console.log(f1);//f1() console.log(f2 ...
- vs打开项目出现“尚未配置为Web项目XXXX指定的本地IIS URL HTTP://localhost:…… .要打开此项目，需要配置虚拟目录……”提示
今天打开网上下载的一个源码,出现如标题的这个问题,这是从未遇见的提示.尝试点击是,但是网站还是运行不起来.于是网上搜索,就有了这篇. 解决的方案如下: 注意:也可以用记事本把工程文件(.vcxproj ...
- 使用httpclient发送http请求
先来个httpclient的maven依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> &l ...
- mysql binlog日志查看及解码
mysql bin log日志导出 mysqlbinlog mysql-bin.000005 > /home/17bin.log 需要添加参数(--base64-output=decode-r ...
- asp.net mvc adminlte第一波
首页模板选用官方DEMO中的Blank模板,这个模板相对来说是最干净的. 首页模板的分割: 官方文档是分的4个部分 Wrapper .wrapper. A div that wraps the who ...
- IOS 截取图片 部分 并生成新图片
/** * 从图片中按指定的位置大小截取图片的一部分 * * @param image UIImage image 原始的图片 * @param rect CGRect rect 要截取的区域 * * ...
- win7的HOST文件夹具体位置
win7的HOST文件位置为C:\WINDOWS\system32\drivers\etc\文件夹下,快捷查看方法如下: 1.按win+r,输入C:\WINDOWS\system32\drivers\ ...
- Python -- 数据加载、存储与文件格式
标签(空格分隔): Python 读入读出通常可以划分为几个大类:读取文本文件和其他更高效的磁盘存储格式,加载数据库中的数据,利用Web API操作网络资源. 读写文本格式的数据 pandas提供了一 ...
- kali/centos 更新 java
kali 转自:http://blog.sina.com.cn/s/blog_5736d8870102w15u.html 墙内的论坛上和博客上有很多这样的文章了,不过一般过程都很复杂,让人看的头晕眼花 ...
- kali4.0 下tftpd-hpa服务无法启动的解决方案
一.前情提要: OS:Kali4.0 64bit 使用以下命令启动tftpd-hpa服务失败: sudo /etc/init.d/tftpd-hpa 二.解决方案: 1.输入以下命令: sudo in ...