方法一 ：table、cell-table

思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent1{

    display: table;

    height:300px;

    width: 300px;

    background-color: #FD0C70;

}

.parent1 .child{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    color: #fff;

    font-size: 16px;

}

</style>

<body>

    <div class="parent1">

        <div class="child">hello world-1</div>

    </div>

</body>

</html>

方法二：

思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0
缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。
当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent2{

    height:300px;

    width: 300px;

    text-align: center;

    background: #FD0C70;

}

.parent2 span{

    display: inline-block;;

    width: 0;

    height: 100%;

    vertical-align: middle;

    zoom: 1;/*BFC*/

    *display: inline;

}

.parent2 .child{

    display: inline-block;

    color: #fff;

    zoom: 1;/*BFC*/

    *display: inline;

}

</style>

<body>

    <div class="parent1">

        <div class="child">hello world-1</div>

    </div>

    <div class="parent2">

        <span></span>

        <div class="child">hello world-2</div>

    </div>

</body>

</html>

方法三：绝对定位

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上，可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent3{

    position: relative;

    height:300px;

    width: 300px;

    background: #FD0C70;

}

.parent3 .child{

    position: absolute;

    top: 50%;

    left: 50%;

    color: #fff;

    transform: translate(-50%, -50%);

}

</style>

<body>

<div class="parent3">

        <div class="child">hello world-3</div>

    </div>

</body>

</html>

方法四：弹性盒子flex

思路：使用css3 flex布局
优点：简单 快捷
缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>未知宽高元素水平垂直居中</title>

</head>

<style>

.parent4{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 300px;

    height:300px;

    background: #FD0C70;

}

.parent4 .child{

    color:#fff;

}

</style>

<body>div> <div class="parent4">

        <div class="child">hello world-4</div>

    </div>

</body>

</html>

CSS未知宽高元素水平垂直居中的更多相关文章

  1. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  2. css/css3实现未知宽高元素的垂直居中和水平居中

    题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...

  3. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  4. 未知宽高div水平垂直居中的3种方法

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  6. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  7. css多种方法实现已知宽度和未知宽度的元素水平垂直居中

    // html <div class="box-wrapper"> <div class="box"> 内部box <p>更 ...

  8. CSS中怎么设置元素水平垂直居中？

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  9. css 文字和子元素水平垂直居中

    关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...

随机推荐

  1. NIO 基础之 Buffer

    文章目录 1. 概述 2. 基本属性 3. 创建 Buffer 3.1 关于 Direct Buffer 和 Non-Direct Buffer 的区别 4. 向 Buffer 写入数据 5. 从 B ...

  2. springMVC容器和Spring容器

    前段时间有人问我,为什么一定要在web.xml中配置spring的listener呢? <listener> <description>spring监听器</descri ...

  3. cool--music

    1.三年的赌注 2.非酋 3.Swan Song 4.Better Than A Hallelujah

  4. SSL编程（2）.NET最简单的客户端

      在Windows平台上,实现SSL的.NET类是System.Net.Security.SslStream类.这个类既可以用于建立SSL服务,也可以用来作为SSL客户端连接远端的SSL服务. 最简 ...

  5. zoj 2818 Root of the Problem（数学思维题）

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2818 题目描述: Given positive integer ...

  6. C#Redis 事务操作

    一.理论 还是抄前辈的理论知识. 和众多其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制.在Redis中,MULTI/EXEC/DISCARD/WATCH这四个命令是我们实现事务的基 ...

  7. .5-浅析webpack源码之入口函数

    从convert-argv出来后,目前进度在这: yargs.parse(process.argv.slice(2), (err, argv, output) => { // ... // 从这 ...

  8. 设计模式学习--面向对象的5条设计原则之开放封闭原则--OCP

    一.OCP简介(OCP--Open-Closed Principle):Software entities(classes,modules,functions,etc.) should be open ...

  9. Visual Studio 命令提示符

    Visual Studio 命令提示和 SDK 命令提示会自动设置环境变量,使您能够轻松使用 .NET Framework 工具. 在 .NET Framework 4 版 和更高版本中,应使用 Vi ...

  10. 用Collectors对List去重

    在学习本篇之前,最好对java8新特性有一定的了解.可以参考:Java8新特性--流(Stream) 场景:有一个实体的List集合,需要根据实体中的某个字段对List去重 要想去重,可以考虑使用Tr ...