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-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
随机推荐
- Java线程：线程的同步与锁
一.同步问题提出 线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏. 例如:两个线程ThreadA.ThreadB都操作同一个对象Foo对象,并修改Foo对象上的数据. public ...
- EditPlus 3.7 中文版已经发布
新一版的 EditPlus 已经在昨天发布了!新版本增加了一个 64位版程序.大家可以到官方网站下载哦. 我同步更新翻译了 32位版应用程序.请点击页面左上角的链接下载.
- lua定义一个简单的类
classA.lua: classA = { a = , b = , --__index = classA; }; classA.__index = classA; function classA:n ...
- The world won't care about your self-esteem. The world will expect you to accomplish something before you feel good about yourself.
The world won't care about your self-esteem. The world will expect you to accomplish something befor ...
- Ubuntu 16.04应用布署小记
本系列文章记录了升级Ubuntu 16.04的布署过程 回到目录 10. Dokuwiki 将虚拟目录配置文件链接到Apache2的可用的配置文件库中 sudo ln -s /opt/dokuwiki ...
- LeetCode:461. Hamming Distance
package BitManipulation; //Question 461. Hamming Distance /* The Hamming distance between two intege ...
- DP专题训练之HDU 1231 最大连续子序列
Description 给定K个整数的序列{ N1, N2, ..., NK },其任意连续子序列可表示为{ Ni, Ni+1, ..., Nj },其中 1 <= i <= j < ...
- 一个 div 实现扇形图（锥形渐变）
需要引用的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min ...
- 对魔兽世界、支付宝、Linux三类软件的简单分析
软工第一次作业: 软件有很多种,如工具类软件.游戏类软件.系统类软件,它们的运行方式也各种各样,如以单机方式运行.以网站方式运行或者以APP方式运行在手机端等,请选取三种软件,分析它们各自的特点. 这 ...
- LA 5713 秦始皇修路 MST
题目链接:http://vjudge.net/contest/144221#problem/A 题意: 秦朝有n个城市,需要修建一些道路使得任意两个城市之间都可以连通.道士徐福声称他可以用法术修路,不 ...