方法一：

用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。

html如下：

<div class="block" style="height: 300px;">

    <div class="centered">

        <h1>haorooms案例题目</h1>

        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>

    </div>

</div>

css如下：

/* This parent can be any width and height */

.block {

  text-align: center;

}

/* The ghost, nudged to maintain perfect centering */

.block:before {

  content: '';

  display: inline-block;

  height: 100%;

  vertical-align: middle;

  margin-right: -0.25em; /* Adjusts for spacing */

}

/* The element to be centered, can

   also be of any width and height */

.centered {

  display: inline-block;

  vertical-align: middle;

  width: 50%;

}

方法二：

可以用table布局方法，但是这种方法也有局限性！

写法如下：

<table style="width: 100%;">

  <tr>

     <td style="text-align: center; vertical-align: middle;">

          Unknown stuff to be centered.

     </td>

  </tr>

</table>

由于table写法比较费时，你也可以用div代替table,写法如下：

html：

<div class="something-semantic">

   <div class="something-else-semantic">

       Unknown stuff to be centered.

   </div>

</div>

css：

.something-semantic {

   display: table;

   width: 100%;

}

.something-else-semantic {

   display: table-cell;

   text-align: center;

   vertical-align: middle;

}

方法三，终极解决方法：

以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！

方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()

demo如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>haorooms不固定高度div写法</title>

    <style>

　　　　.center {

  　　　　position: fixed;

  　　　　top: 50%;

  　　　　left: 50%;

  　　　　background-color: #000;

  　　　　width:50%;

  　　　　height: 50%;

　　　　　-webkit-transform: translateX(-50%) translateY(-50%);

　　　　}

    </style>

</head>

<body>

    <div class="center"></div>

</body>

</html>

我上面的css只是针对webkit内核的浏览器，其他内核浏览器写法如下：

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

css3不定宽高水平居中：

在父级元素加3句话，就可以实现子元素水平垂直居中。

justify-content:center;//子元素水平居中

align-items:center;//子元素垂直居中

display:-webkit-flex;

运用margin:auto进行垂直居中：

html：

<div class="father">

    <div class="son"></div>

</div>

css：

.father{position:fixed;width:100%;height:100%;top;0;left:;background-color:rgba(0,0,0,.7);}

.son{position: absolute;top:;left:;bottom:;right:;width:50%;height:50%;margin:auto;background-color:red;}

div在不固定高度的情况下垂直或者水平居中的更多相关文章

  1. div元素宽度不定的情况下如何居中显示

    最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习. 方法一:兼容IE67 <div ...

  2. div样式text-align在子元素缩进不规范的情况下，chrome出现的问题（貌似结果是inline-block导致的）

    在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况: 详细情况:segmentfault1 segmentfault2 全文表达: <html><he ...

  3. css3种不知道宽高的情况下水平垂直居中的方法

    第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...

  4. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  5. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  6. EasyUI特殊情况下的BUG整理

    前面有两篇: Easyui - combo[tree,box]下拉图标有间隙bug解决方法 http://blog.csdn.net/isea533/article/details/12996561 ...

  7. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

  8. 相同域名不同端口的两个应用，cookie名字、路径都相同的情况下，会覆盖吗

    首先答案是: 会的. 本地测试流程: 两个相同的应用,代码完全相同:只是部署在两个不同的tomcat:域名都是localhost 应用A:部署在http://localhost:8087/ 应用B:部 ...

  9. 同一容器中a标签比较多的情况下通过title属性值隐藏

    同一容器中a标签比较多的情况下如何通过title属性值控制a标签的隐藏或显示 最近项目中遇到一个IE兼容性问题,网站需要在底部footer添加"站长统计"代码,容器中动态添加很多a ...

随机推荐

  1. mysql binlog日志查看及解码

    mysql bin log日志导出 mysqlbinlog  mysql-bin.000005 > /home/17bin.log 需要添加参数(--base64-output=decode-r ...

  2. Android Fragment替换View

    在BaseActivity 中添加替换方法 public void replace(int id, Fragment fragment) { getSupportFragmentManager() . ...

  3. ps一些图片的操作

    ctrl+c 复制 ctrl+n 新建 ctrl+v粘贴 ctrl+s 保存 如果要将某个带字的背景去掉它的字体那么就是 ctrl+t

  4. JSTL标签库之核心标签

    一.JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 二.JSTL标签库的分类 核心 ...

  5. &和&&的区别

    &和&&都可以用作逻辑与的运算符,表示逻辑与(and),当运算符两边的表达式的结果都为true时,整个运算结果才为true,否则,只要有一方为false,则结果为false. ...

  6. PRINCE2项目管理七大流程之指导流程

    PRINCE2项目管理七大流程之指导流程   今天学习七大流程之二--项目指导流程 项目指导流程的目的就是使项目管理委员会能够对项目的成功负责,具体来说,是由项目管理委员会作出关键决策,并进行总体控制 ...

  7. JavaScript打印正倒直线

    做了一个作业,用JavaScript打印正倒直线,突然觉得自己还是逻辑有待加强训练啊 document.write("<h3>打印倒正金字塔直线</h3>" ...

  8. wpf直接绑定xml生成应用程序

    目的:在vs2010下用wpf完成一个配置工具,配置文件为xml格式,xml文件作为数据源,直接和wpf前台绑定,生成exe后,运行exe能够加载同路径下的xml配置文件并显示 xml文件在项目中的设 ...

  9. 2.[WP Developer体验Andriod开发]Andriod Studio结合Visual Studio Emulator for Android调试Android App

    0. 工欲善其事必先利其器 上一篇博客对比了一下Android和WinPhnoe的布局容器,后续篇章重点放在Android的开发上了. 说到开发就绕不开调试程序,调试Android App我们有2种选 ...

  10. vue-cli 安装报错

    # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...