<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .cc{

            display: table;

            width:300px;

            height:300px;

            margin:30px auto;

            text-align:center;

            background:#00c1de;

        }

        p{

            display:table-cell;

            background:green;

            vertical-align:middle;

        }

    </style>

</head>

<body>

<div class="cc">

    <p>1111</p>

</div>

</body>

</html>

给父元素设置display:table     子元素设置display:table-cell;vertical-align:middle

css实现不定高度的元素垂直居中问题的更多相关文章

  1. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  2. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  3. HTML/CSS：div水平与元素垂直居中（2）

    单个div水平居中:设置margin的左右边距为自动 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中 ...

  4. CSS布局：元素垂直居中

    CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...

  5. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  6. css点滴1—八种方式实现元素垂直居中

    这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...

  7. css元素垂直居中方法

    1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...

  8. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  9. css元素垂直居中

    一.碎碎念:啊啊啊,原谅我只能起一个酱紫微大众微俗气的标题,因为实在没有什么能比这样表达的更清楚直观了呢! 二.没有知识储备,直接上示例: 1.思路:给父元素添加display: table属性:给子 ...

随机推荐

  1. 进程间通信IPC-信号

    1,signal-ANSI C信号处理 #include <signal.h> typedef void (*sighandler_t)(int); sighandler_t signal ...

  2. 深度学习论文翻译解析（四）：Faster R-CNN: Down the rabbit hole of modern object detection

    论文标题:Faster R-CNN: Down the rabbit hole of modern object detection 论文作者:Zhi Tian , Weilin Huang, Ton ...

  3. 利用cordova打包H5混合app

    1.首先布置jdk环境,下载jdk(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  4. 支付宝（alipay）即时到账收款接口开发中的那些事儿

    不会做,看看也可以会,要做好就还是需要多学习 国庆回来就一直没状态,看完<银河护卫队>,印象最深的竟然是只有两句台词的呆萌groot,昨天才休息一天,大耍大吃,今天还是把昨天的知识学习一下 ...

  5. 自动化运维(2)之一键式单实例安装MySQL

    ZMySQLAutoTools文档 目标:自动化构建部署MySQL数据库,一键式单实例mysql安装,备份,监控,主从集群部署等.以及jdk,tomcat,nginx等基础中间件的自动化部署安装及运维 ...

  6. 如何在framegroup各个frame和window之间共享数据

    可以尝试使用execScript,在指定window或者frame中执行脚本,对于frameGroup里面的frame也有效,若name和frameName都未指定,则在当前window中执行脚本,具 ...

  7. 延迟初始化Lazy

    延迟初始化出现于.NET 4.0,主要用于提高性能,避免浪费计算,并减少程序内存要求.也可以称为,按需加载. 基本语法: Lazy<T> xx = new Lazy<T>(); ...

  8. IdentityServer4关于多客户端和API的最佳实践【含多类型客户端和API资源，以及客户端分组实践】【下】

    经过前两篇文章你已经知道了关于服务器搭建和客户端接入相关的基本资料,本文主要讲述整个授权系统所服务的对象,以ProtectApi资源为演示 目标: 1)实现多资源服务器针对请求的token校验,接入I ...

  9. VS2017进程为idXXXX 无法启动解决方案

    1.对无法启动项目的 .csproj 后缀文件用记事本打开 找到<WebProjectProperties>xx</WebProjectProperties> 删掉 让后 重新 ...

  10. 探秘小程序（10）:分享功能+webview

    场景: 小程序页面用webview嵌入了h5页面,h5页面需要与小程序进行交互,h5页面内容不同,分享的链接也不一样 分享功能: 小程序的分享功能即用户点击小程序右上角,转发功能页面.可以指定分享卡片 ...