父级宽高不定，如何使子元素水平垂直居中？

下面是用 display: inline-block 实现的：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直自适应</title>

    <style>

    * {

        margin: 0; padding: 0;

    }

    .box {

        position: relative;

        width: 400px; height: 600px;

        margin: 100px auto;

        border: 1px solid #666;

        text-align: center;

    }

    .content {

        width: 100px; height: 100px;

        display: inline-block;

        vertical-align: middle;

        background: red;

    }

    .middle-span {

        height: 100%;

        display: inline-block;

        vertical-align: middle;

    }

    </style>

</head>

<body>

    <div class="box">

        <div class="content"></div>

        <span class="middle-span"></span>

    </div>

</body>

</html>

子级 display: inline-block; ，父级 text-align: center; ，实现水平居中。

子级 vertical-align: middle; ，且span height: 100%; ，实现垂直居中。

使用inline-block做水平垂直居中的更多相关文章

  1. css实现水平/垂直居中效果

    一.如果是已知宽高的元素做水平/垂直居中效果的话,可以直接用具体的数值指定定位布局或偏移布局,这个就不过多讨论.这里主要介绍在不知宽高或需要弹性布局下的几种实现方式. 二.1.table表格法思路:显 ...

  2. 如何将一个div水平垂直居中？4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

  3. 如何将一个div水平垂直居中？6种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

  4. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  5. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  6. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  7. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  8. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  9. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

随机推荐

  1. d3可视化实战04：事件绑定机制

    首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑 ...

  2. 探讨VMP 2.12.3 导入表修复

    壳版本:VMProtect.Ultimate.2.12.3 样本:notepad.exe 目的:IAT修复 作者:MrWrong 标题:探讨VMP 2.12.3 导入表修复 只是感兴趣,没有其他目的. ...

  3. Smarty for foreach 使用

    {for} {for}{forelse}用于创建一个简单的循环. 下面的几种方式都是支持的: {for $var=$start to $end}步长1的简单循环. {for $var=$start t ...

  4. 8.2.1.3 Range Optimization

    8.2.1.3 Range Optimization 范围访问方法使用一个单个的索引来检索表记录的自己,包含在一个或者索引值区间. 它可以用于一个单独的部分或者多个部分的索引,下面章节给出了一个详细的 ...

  5. 如何实现室内Wi-Fi无线终端的精准定位

    如何实现室内Wi-Fi无线终端的精准定位 如何实现室内Wi-Fi无线终端的精准定位 随着商圈020的兴起,室内定位技术的也如百花争艳般不断涌现.但随着室内Wi-Fi网的架设普及,基于Wi-Fi定位技术 ...

  6. crontab,at命令,常见问题

    crontab命令 前 一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的. Linux 系统上面原本就有非常 ...

  7. 2012高校GIS论坛

    江苏省会议中心 南京·钟山宾馆(2012年4月21-22日) 以"突破与提升"为主题的"2012高校GIS论坛"将于4月在南京举行,由南京大学和工程中心共同承办 ...

  8. 【Linux】部署apache

    部署前的准备: 1.安装apr #wget http://mirror.bit.edu.cn/apache/apr/apr-1.4.8.tar.gz #tar -zxvf apr-1.4.8.tar. ...

  9. 解耦——Hybrid H5跨平台性思考

    跨平台,是HTML5最重要的能力之一.而Hybrid H5因强依赖于具体App,往往不具有跨平台性.这时,将强依赖关系解耦,即可恢复HTML5的跨平台能力.近期我负责手Q红包打赏项目的前端开发,因项目 ...

  10. libvirt TLS

    博客原文 http://hi.baidu.com/wwfmarcpjkbdiod/item/7b43c89e949d7fbbcd80e590 构建Libvirt的x509证书远程tls连接http:/ ...