方法一 ：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. 05 - JavaSE之数组

    一维数组 java中的数组是引用类型,分配在堆空间上. 一维数组的声明方式: type var[]; type[] var; java中声明数组时不能指定其长度,如下,因为java中的数组是分配在堆空 ...

  2. springboot-27-整合mybatis,druid连接池

    sprinboot整合mybatis, 有2种方式, 第一种完全使用注解的方式, 还有一种就是使用xml文件的方式 项目使用gradle + idea, 数据源使用druid, 多使用groovy编写 ...

  3. 代码统计工具cloc

    https://sourceforge.net/projects/cloc/files/cloc/v1.64/

  4. SpringBoot 配置热部署

    做个记录,以免忘记: 1. 在 pom.xml 文件中的 dependencies 标签以内添加组件 devtools,具体内容如下: <!-- SpringBoot 热部署组件 devtool ...

  5. 传统项目转前端工程化——路由跳转时出现浏览器锁死和白屏【该死的同步ajax】

    [一开始我想到是该死的同步ajax,但我没验证,把他忽略了] 在探索前端工程化vue-cli做spa时,从搜索结果页跳转商品详情页时,因为详情页有很多ajax请求,并且都用的同步请求,就会导致请求时浏 ...

  6. 基于asp.net mvc的近乎产品开发培训课程（第二讲）

    演示产品源码下载地址:http://www.jinhusns.com/Products/Download 

  7. textarea赋值时换行符无效的解决方法

    //替换字符串中的换行符为br var Content = JSON.stringify(txt); Content = Content.replace(/\\n/g, '<br />') ...

  8. JS 对话框 语法

    javaScript  是个脚本语言,没有能力独立执行,必须要有宿主文件 html, 作用 进行数据运算 控制浏览器的一些功能(对一下高级浏览器的影响有限) 控制元素(属性,样式,内容等) 一 用法 ...

  9. Java基础——关于接口和抽象类的几道练习题

    呃,一定要理解之后自己敲!!!这几道题,使我进一步了解了接口和抽象类. 1.设计一个商品类 字段: 商品名称,重量,价格,配件数量,配件制造厂商(是数组,因为可能有多个制造厂商) 要求: 有构造函数 ...

  10. 设计模式-组合模式(Composite)

    一.概念 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 二.模式动机 组合模式,通过设计一个抽像的组件类,使它既代表叶子对象,又代表组合对 ...