容器设置相对定位

元素设置宽高，并使用绝对定位，上下左右值均为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及以上）的更多相关文章

  1. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  2. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  3. span(行级元素)在不定高的div(块级元素)中垂直居中的方法

    设置父级元素: align-items: center; display: flex;

  4. css实现高度不固定的div元素模块在页面中水平垂直居中

    <!DOCTYPE html><html>    <head>        <title>Laravel</title> <link ...

  5. css如何让子元素在父元素中水平垂直居中

    方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 【div+css】两个div，如何让内层的div在外层div中水平垂直居中

    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...

  7. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  9. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

随机推荐

  1. response.write();改变页面布局的原因及解法

    Response.Write ,在ASP.NET 中不要随便使用 Response.Write,其原因是它会打乱 ASP.NET 的输出流顺序,在aspx.cs 中使用 Response.Write ...

  2. css3样式控制（鼠标滑过 显示标注信息）

    <div class="item"> <h1>A</h1> <div class="tooltip"> < ...

  3. border-radius的兼容问题

    border-radius可以便捷的制作圆角效果,不需要通过增加圆角图片来达到效果,便于维护. 语法:border-radius:none | 1-4 length | % / 1-4 length| ...

  4. java static静态方法的并发性

    在做一个web项目的时候需要做一个通用类去处理一些问题,想到这个类很多地方都有用到,又不想每次都new一个,因此就定义了里面的方法是静态方法,然后又因为多个静态方法都用到了同一个对象,结果定义了一个类 ...

  5. SpringMVC框架下的异常处理

    在eclipse的javaEE环境下:导包.... 1. 在 @ExceptionHandler 方法的入参中可以加入 Exception 类型的参数, 该参数即对应发生的异常对象 2. @Excep ...

  6. 轻松实现Android,iOS的一个手势动画效果

    先来看效果 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过 ...

  7. filter-自己的理解

    在配置filter中的拦截功能时候 ,我们在web.xml中进行配置文件.filter过滤文件有系统自己带有的,还有就是我们手写的filter文件.网页调用servlter的时候,我们可以在此之前调用 ...

  8. winform 对话框，保存，另存为，还有打印控件

    学习的对话框的种类: 1.打开文件对话框(OpenFileDialog) 2.保存文件对话框(SaveFileDialog) 3.字体对话框(FontDialog) 4.颜色对话框(ColorDial ...

  9. Android Studio 2.0使用指南

    一.下载界面.[无激活码 无序列码 无毒请放心使用][需将JAVA程序升级到1.8] 网址:http://www.android-studio.org/index.php/download/andro ...

  10. 微信小程序-上传下载

    wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...