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-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
随机推荐
- Asp.net mvc 添加Jquery UI
1.使用NuGet下载jquery ui Install-Package jQuery.UI.Combined 2.下载多语言文件: development-bundle/i18n目录下是jquery ...
- linux命令:crontab命令（转）
一.crond简介 二.crond服务 三.crontab命令详解 四.使用注意事项 linux系统是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作 ...
- 乐1S 5.8(Android 6.0) 刷第三方recovery并刷入root权限
说明 我的是 乐视1S, 系统为EUI 5.8 (powered by Android 6.0) 使用的是 superSu来root, 你可以到这里下载 文件 *下载 Recovery Flashab ...
- 剑指offer 复制构造函数
复制构造函数: A(const A &other){value=other.value;} 也就是传值参数改为常量引用. #include<iostream> using name ...
- 模块（configparser+shutil+logging)
一.configparser模块 1.模块介绍 configparser用于处理特定格式的文件,其本质上是利用open来操作文件. *注:(这里解释一下特定格式的文件) a.有section和opti ...
- treeview 控件使用和数据绑定
一.TreeViewe 是由多个类来定义的,TreeView组件是由命名空间“System.Windows.Froms”中的“TreeView”类来定义的,而其中的节点(即Node),是由命名空间“S ...
- C#数组
数组是一种数据结构,它包含若干相同类型的变量.数组是使用类型声明的: type[] arrayName; 下面的示例创建一维.多维和交错数组: class TestArraysClass { stat ...
- python utf-8 配置
环境:centos6.5,python 2.6 源码文档使用utf-8 #!/usr/bin/python # -*- coding: UTF-8 -*- 字符串默认用utf-8(不用在前面加u了) ...
- linux下给网卡加VLAN标签和私网地址
1.加载8021q协议 moprobe 8021q 2.安装必要的包 yum -y groupinstall base linux 3.添加私网地址(写到开机启动项) vconfig add bond ...
- android HAL 教程（含实例）
http://www.cnblogs.com/armlinux/archive/2012/01/14/2396768.html Android Hal 分析 ...