容器设置相对定位

元素设置宽高，并使用绝对定位，上下左右值均为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. 异步记载数据时page是怎么计算的

    最近一直在完善基于Busybox做的ARM Linux的根文件系统,由于busybox是一个精简的指令集组成的简单文件系统,其优点就是极精简,满足了Linux基本的启动需求,由于它几乎没有什么后台服务 ...

  2. 谷歌 HTML/CSS 规范 2016-12-30

    背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...

  3. centos7安装http服务

    1.yum安装http [root@localhost ~]# yum install httpd -y 2.启动http服务 [root@localhost ~]# systemctl start  ...

  4. sql常用单行函数

    学到数据库了,小记一下的喽~~~>>>>常用的单行函数 select * from employees 查询所有 select first_name,lower(first_n ...

  5. 使用rsync和scp远程同步文件

    rsync1. rsync可以通过ssh隧道的方式传输文件夹: rsync -arv --progress clone user@host:remotedir loaldir . rsync通过ssh ...

  6. install intel c/c++ compiler

    通过在Intel官网上申请试用版本Intel® Parallel Studio XE Cluster Edition for Linux,会让你提交邮箱等信息,完成后会很快回复邮件,邮件会给出下载地址 ...

  7. java.lang.classNotFound:明明已经导入了jar包，包里也有该类，却找不到的解决方法

    试一下:在web-inf文件夹下新建lib文件夹:将所有需要用到的jar包放在lib中,重启tomcat.

  8. linux开发缩写

    1.CONFIG_OF 在一些驱动中经常看到#ifdef CONFIG_OF,这里的OF是Open Firmware. Open Firmware. This was invented long ti ...

  9. Learn GIT

    1.创建版本库: git init 设置用户: git config --global user.email "you@example.com" 2.添加到仓库(将修改的内容提交到 ...

  10. 理清C++常量指针和指针常量这团乱麻

    写在前面: 与其说C++中的常量指针和指针常量是一块很有嚼头的语法糖,不如说它是一块相当难啃的骨头.其实本来没什么,这无非是const int *p与int* const p的区别, 但一涉及到起名字 ...