方法一 ：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. docker 使用时一些问题点

    1.run 参数 --privileged,默认是关闭的,使用该参数,container 内的 root 拥有真正的 root 权限,否则,container 内的 root 只是外部的一个普通用户权 ...

  2. maven - 使用nexus 搭建maven私服

    1, java环境 [wenbronk@localhost nexus]$ java -version java version "1.8.0_121" Java(TM) SE R ...

  3. Java 8 新特性-菜鸟教程 (2) -Java 8 方法引用

    Java 8 方法引用 方法引用通过方法的名字来指向一个方法. 方法引用可以使语言的构造更紧凑简洁,减少冗余代码. 方法引用使用一对冒号 :: . 下面,我们在 Car 类中定义了 4 个方法作为例子 ...

  4. 简单聊聊SOA和微服务

    转自:https://juejin.im/post/592f87feb123db0064e5ef7c  (2017-06) 简单聊聊SOA和微服务 架构设计中的朴素主义 前两天和一个朋友聊天,他向我咨 ...

  5. Spring学习之路-注解

    Spring的注解总结. 地址:https://docs.spring.io/spring/docs/4.3.12.RELEASE/spring-framework-reference/htmlsin ...

  6. sql2005 新加的函数 row_number ()

    1:数据表 2:问题:查询各个部门的最低工资的userid号 select a.* from (select ROW_NUMBER() over(partition by dept order by ...

  7. SqlDataAdapter 对datagridview进行增删改(A)

    这种方法主要是双击datagridview单元格,直接进行添加,修改,删除,在实际开发中并不太常用,另一种方法下一次在具体陈述. using System; using System.Collecti ...

  8. Java基础——GUI编程（二）

    一.事件监听机制 -- 事件源:awt 或swing包中的那些图形界面组件,即发生事件的组件 -- 事件:Event  用户对组件的一个操作 -- 监听器:Listener  负责处理事件的方法 二. ...

  9. Android - AsyncTask你知道多少？

    http://www.cnblogs.com/qlky/p/5658070.html 为什么asyncTask最好在主线程初始化?在子线程怎么办? AsyncTask四个方法的执行顺序? mWorke ...

  10. 面向对象设计模式_生成器模式解读(Builder Pattern)

    首先提出一个很容易想到应用场景: 手机的生产过程:手机有非常多的子件(部件),成千上万,不同品牌的手机的生产过程都是复杂而有所区别的,相同品牌的手机在设计上也因客户需求多样化,大到型号,小到颜色,是否 ...