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-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
随机推荐
- 用 正则表达式 限定XML simpleType 定义
<xsd:simpleType name="ResTrictions"> <xsd:restriction base="xsd:string" ...
- PHP获取时间、时间戳的各种格式
1.获取当前时间方法date() 很简单,这就是获取时间的方法,格式为:date($format, $timestamp),format为格式.timestamp为时间戳--可填参数. 2.获取时间戳 ...
- fso查找被删除的文件
<html> <head> </head> <body> 源目录:<input id="txtOld" value=" ...
- web项目开发规范整理总结
一.类.函数.变量名命名: 1.定义类时,全部拼音的首字母必须大写:如Person,ClassDemo:(帕斯卡命名法):也可以用带下斜杆的匈牙利命名法进行命名,如 head_navigatio ...
- springmvc使用freemarker
首先需要添加freemarker.jar到项目,如果项目中有spring或者spirngmvc,需要整合,首先配置freemarkerConfig,代码结构如下 <!-- 设置freeMarke ...
- 95、Jenkins部署.net持续集成自动化测试环境
##目录 1. 安装Jenkins 1. 配置Jenkins 1. 自动编译 1. 自动部署 1. 自动测试 环境介绍: web服务器机器:192.168.1.7 svn服务器:192.168.1.5 ...
- mysql 替换某个字段中的某个字符
遇到这么个情况: 比如: Msql里面的某个表的某个字段里面存储的是一个人的地址,有一天这个地址的里面的某个地 名变了,那么他的地址也就要变: 比如: 原来是: number ...
- MATLAB地图工具箱学习总结（一）从地图投影说起
MATLAB地图工具箱学习总结(一)从地图投影说起 前言 本学期地图投影课上,李连营老师建议我们使用MATLAB完成每周的作业.从大二上学期开始接触MATLAB学习数学运算和地理数据处理的我,自然不会 ...
- java:IO流学习小结
可以看以下内容学习一下: http://blog.csdn.net/zzp_403184692/article/details/8057693
- AIDMA VS AISAS vs ISMAS 营销法则
AIDMA法则与传统媒体时代 引起注意——产生兴趣——培养欲望——形成记忆——购买行动 注:AIDMA,传统消费者行为学理论模型,即:Attention(引起注意),Interest (引起兴趣),D ...