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

下面是用 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. Android 常用对话框Dialog封装

    Android 6种 常用对话框Dialog封装 包括: 消息对话框.警示(含确认.取消)对话框.单选对话框. 复选对话框.列表对话框.自定义视图(含确认.取消)对话框 分别如下图所示:       ...

  2. Android 中如何使用动画

    1:首先在res/anim/文件夹下建立动画xml文件. 2:在java代码中对UI控件使用动画. //加载动画 Animation myAnim=AnimationUtils.loadAnimati ...

  3. Delphi：窗体自适应屏幕分辨率（根据预设值的比例改变）

    delphi 程序适应屏幕分辨率,先在表单单元的Interface部分定义两个常量, 表示设计时的屏幕的宽度和高度(以像素为单位). 在表单的Create事件中先判断 当前分辨率是否与设计分辨率相同, ...

  4. rm: cannot remove `/home/cn0000/log/formlog.20140417': Read-only file system

    [root@localhost home]# su - cn0000 rm: cannot remove `/home/cn0000/log/monitor_xmllog.20140417': Rea ...

  5. sendmsg: no buffer space available

    今天在将项目从虚拟机上移植到真实机器上面的时候,发现问题,总是不成功,最后判断是userspace的程序没有向kernel发送消息成功,因为无法触发kernel的行为,但是userspace显示正常. ...

  6. Android视频录制

    public class MainActivity extends Activity { private MediaRecorder videoRecorder=null; private Butto ...

  7. 深入理解linux网络技术内幕读书笔记(三)--用户空间与内核的接口

    Table of Contents 1 概论 1.1 procfs (/proc 文件系统) 1.1.1 编程接口 1.2 sysctl (/proc/sys目录) 1.2.1 编程接口 1.3 sy ...

  8. 设计模式&UML学习

    1. 1.1 1.2 2. 2.1 2.2 3.参考文档 [1] 陈金荣:http://blog.csdn.net/cjr15233661143/article/details/8532997 [2] ...

  9. 再探java基础——对面向对象的理解(1)

    对象 对象是人们要进行研究的任何事物,从最简单的整数到复杂的飞机等均可看作对象,它不仅能表示具体的事物,还能表示抽象的规则.计划或事件.对象具有属性和行为,在程序设计中对象实现了数据和操作的结合,使数 ...

  10. com.microsoft.sqlserver.jdbc.SQLServerException: 结果集没有当前行

    參考博客com.microsoft.sqlserver.jdbc.SQLServerException: 结果集没有当前行 java获取结果集,if(rs!=null).和while(rs.next( ...