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

下面是用 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. iOS UITableView的使用大全－备用

    首先.对UITableView进行讲解,下面有对它进行实际的应用 UITableView 显示大型内容的列表 单行,多列 垂直滚动,没有水平滚动 大量的数据集 性能强大,而且普遍存在于iPhone的应 ...

  2. SwitchySharp怎样设置 （ proxy switch！的设置与使用方法）

    规则列表URL  https://autoproxy-G{过}F{滤}Wlist.googlecode.com/svn/trunk/G{过}F{滤}Wlist.txt 注:不同的代{过}{滤}理  相 ...

  3. 转：perror和strerror的区别

    概述: perror和strerror都是C语言提供的库函数,用于获取与erno相关的错误信息,区别不大,用法也简单.最大的区别在于perror向stderr输出结果,而 strerror向stdou ...

  4. 转：Linux内存管理之mmap详解

    一. mmap系统调用 1. mmap系统调用 mmap将一个文件或者其它对象映射进内存.文件被映射到多个页上,如果文件的大小不是所有页的大小之和,最后一个页不被使用的空间将会清零.munmap执行相 ...

  5. monogdb笔记１

    :db.collection.remove()与db.collection.drop()的比较 插入100万条测试数据 ;i<;i++){ db.tester.insert({-i}) } 进行 ...

  6. mysql主从复制错误：Last_SQL_Error: Error 'Duplicate entry '327' for key 'PRIMARY'' on query. Default database: 'xxx'. Query: 'insert into

    这个算不算解决,我都不太清楚,因为我感觉网上的说法,只是把错误忽略了,不表示以后用从库时不会出问题!!! 解决的办法是在从库上执行: mysql> slave stop; mysql> s ...

  7. Powershell调用静态方法

    Powershell将信息存储在对象中,每个对象都会有一个具体的类型,简单的文本会以System.String类型存储,日期会以System.DateTime类型存储.任何.NET对象都可以通过Get ...

  8. BZOJ1119: [POI2009]SLO

    1119: [POI2009]SLO Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 379  Solved: 181[Submit][Status] ...

  9. Linux下安装GCC5.3.0（亲测有效）

    对于linux小白来说,只需要先知道怎么安装,至于为什么等学了linux再说吧..知识不系统的坏处啊! 首先,一般ubuntu上都预装了低级版本的Gcc,完全可以应付刷OJ时的C+Class+STL的 ...

  10. HDU-2571命运

    Problem Description 穿过幽谷意味着离大魔王lemon已经无限接近了!可谁能想到,yifenfei在斩杀了一些虾兵蟹将后,却再次面临命运大迷宫的考验,这是魔王lemon设下的又一个机 ...