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

下面是用 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. Xcode 如何设置 自动内存管理 转换为 手动内存管理

    建议使用自动内存管理 ARC. 如果不想自动内存管理,可以在build phases 下的compile sources 中找到不想自动管理的.m文件 ,给它加compiler flags 为 -fn ...

  2. java 批量插入10万条数据

    for (int i = 0; i < 100000; i++) { dbHelper.insert("INSERT aaa(name) Values ('1')"); } ...

  3. synaptics驱动,插入USB鼠标禁用触控板注册表

    Title:synaptics驱动,插入USB鼠标禁用触控板注册表 --2010-11-01 22:21 记得以前用过一个synaptics的驱动,自带有插入USB鼠标禁用触控板的选项的,有些没有自带 ...

  4. CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 （二）PHP(PHP-FPM)安装篇

    编译安装PHP及内置PHP-FPM nginx本身不能处理PHP,它只是个web服务器,当接收到请求后,如果是php请求,则发给php解释器处理,并把结果返回给客户端(浏览器). nginx一般是把请 ...

  5. SQL viewId 比较好看的 Id

    有时候我们希望 Id 要好看一些,比如 Id=1 -> Id=T000001 refer : http://www.kodyaz.com/t-sql/custom-sequence-string ...

  6. 一句话输出网站404页面，REFER及相关排序

    cat www.log|awk '$9~/404/ {print $7"," $11}'|sort|uniq -c|sort -nr > ./www404.csv

  7. 用VBA读取Excel表格输出到格式化的xml文件中

    最近需要做一个一劳永逸的XML文档生成,给项目内部专用的,直接VBA方便了,才第一次用.现学现卖了....抽时间还是系统的学习下这方面的知识吧 输出到UTF-8编码的XML文档.并且换行符是Unix的 ...

  8. 【细说Java】揭开Java的main方法神秘的面纱

    大家都知道,main方法是Java应用程序的入口,其定义格式为: public static void main(String[] args) 可是为什么要这么定义呢?不这样定义可以么?main方法可 ...

  9. Android ListView嵌套Button,Button事件覆盖item事件解决办法

    方法就是修改item布局的xml文件: 在根布局里加上: android:descendantFocusability="blocksDescendants" 然后在按钮布局里加上 ...

  10. http soap关系

    http:是一个客户端和服务器端请求和应答的标准(TCP).http协议其目的是为了提供一种发布和接收htttp页面的方法 一http协议的客户端与服务器的交互:由HTTP客户端发起一个请求,建立一个 ...