<!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. 【PyTorch深度学习60分钟快速入门 】Part5：数据并行化

      在本节中,我们将学习如何利用DataParallel使用多个GPU. 在PyTorch中使用多个GPU非常容易,你可以使用下面代码将模型放在GPU上: model.gpu() 然后,你可以将所有张 ...

  2. spring-boot-2.0.3之redis缓存实现，不是你想的那样哦！

    前言 开心一刻 小白问小明:“你前面有一个5米深的坑,里面没有水,如果你跳进去后该怎样出来了?”小明:“躺着出来呗,还能怎么出来?”小白:“为什么躺着出来?”小明:“5米深的坑,还没有水,跳下去不死就 ...

  3. 图像处理中kmeans聚类算法C++实现

    Kmeans聚类算法是十分常用的聚类算法,给定聚类的数目N,Kmeans会自动在样本数据中寻找N个质心,从而将样本数据分为N个类别.下面简要介绍Kmeans聚类原理,并附上自己写的Kmeans聚类算法 ...

  4. [USACO13DEC] Optimal Milking

    Description n个点排成一排,点有点权,要求支持两种操作: 修改某个点的点权 询问取出任意多且不相邻的点的点权和最大值 Solution 跟最大子段和一样,可以用分治做,用线段树记录一下左右 ...

  5. cJSON填坑记

    1. 艰辛的过程 最近做了一个嵌入式的项目,需要与服务器进行连接.为了方便服务器处理数据,经商定后统一采用JSON形式进行数据的传输. 以前没有用过JSON格式进行数据处理,所以上网搜索了一下,很多人 ...

  6. MyBatis——MyEclipse中使用mybatis-generator

    mybatis-generator可以根据数据库的表来生成POJO类.mapper.xml和DAO接口,用这个插件会大大地提高开发的效率.网上虽然有一些使用这个插件的教程,但我单个试了并不能成功,会出 ...

  7. centos6.5修改yum安装的mysql默认目录

    0.说明 Linux下更改yum默认安装的mysql路径datadir. linux下,MySQL默认的数据文档存储目录为/var/lib/mysql. 假如要把MySQL目录移到/home/data ...

  8. CheckBox-复选框-删除-选中行

    <!--删除选中的行,利用oTable.deleteRow(i)方法--> <!DOCTYPE html> <html xmlns="http://www.w3 ...

  9. Linux常用基本命令:tr-替换或者删除字符

    tr命令 作用:从标准输入中替换,缩减或者删除字符,并将结果输出到标准输出 格式:tr [option] [set1] [set2] tr [选项] [字符1] [字符2] 把y替换m, o替换e,并 ...

  10. node 跨域问题

    node跨域有很多方法 1.引入 中间件cors 我觉的最好的方法 var express=require('express'); var cors=require('cors'); var app= ...