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-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
随机推荐
- 最简单的推送--uexGetui
个推插件使用指南 配置方法这里不再复述,详情请参见插件接入指引 怎样创建一个最简单的推送? //只需要两个方法 uexGetui.initialize(data); uexGetui.onInitia ...
- DKIM对发送邮件的好处及使用方法
关于DKIM: What is DKIM? 简单的来说dkim有益于增加邮件服务供应商中的反垃圾邮件系统评分,减少邮件内容被评为垃圾邮件的概率. 但使用它不等同于不会被评为垃圾邮件.另外,邮件的发送次 ...
- Ajax.BeginForm()实现ajax无刷新提交
1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...
- Autumn is a second spring when every leaf is a flower.
Autumn is a second spring when every leaf is a flower. 秋天即是第二个春天,每片叶子都是花朵.——阿尔贝·加缪
- android 获取设备拔插状态广播事件易漏掉的一行属性！
我们都知道设备拔插的状态获取需要一个权限 <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILES ...
- AngularJS 后台交互
我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...
- 不写完不回家的TreeSet
TreeSet详解 继承架构图: |——SortedSet接口——TreeSet实现类 Set接口——|——HashSet实现类 |——LinkedHashSet实现 ...
- 微信OAuth2.0网页授权
1.OAuth2.0网页授权 关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页 ...
- js取两个数组的交集|差集|并集|补集|去重示例代码
http://www.jb51.net/article/40385.htm 代码如下: /** * each是一个集合迭代函数,它接受一个函数作为参数和一组可选的参数 * 这个迭代函数依次将集合的每一 ...
- MySQL运算符和内置函数
1.字符函数 CONCAT('a','-','b','-','c')效果等同于CONCAT_WS('-','a','b','c') FORMAT()的返回结果是字符型,会对操作数四舍五入,如:SELE ...