方法一：

用一个“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. Dynamics AX 2012 R2 业务系列-采购业务流程

    在博文Dynamics AX R2 业务系列中,Reinhard对这个系列做了一个规划,下面我们就按照规划开始说业务吧. 国际惯例,从采购开始. 1.采购的主要职责 简单点说,采购的主要职责,是从供应 ...

  2. Dynamics AX 2012 R2 如何处理运行时间较长的报表

    当处理的数据量较多,逻辑比较复杂时,报表可能会超时.为了解决这个问题,Reinhard一直使用SrsReportDataProviderPreProcess来做预处理报表.它会在调用SSRS前,在AX ...

  3. ES数据-MySql处理Date类型的数据导入处理

    用ES的小伙伴们,相信大家都遇到过Mapping处理Date类型的数据头疼问题吧. 不用头疼了,我来给你提供一种解决方案: 1.Maping定义为: {  "mappings": ...

  4. HTML转移字符对照表

    body { margin: 0; padding: 0; background: #FFF; color: #000; font-family: "宋体", arial; fon ...

  5. 剑指offer 复制构造函数

    复制构造函数: A(const A &other){value=other.value;} 也就是传值参数改为常量引用. #include<iostream> using name ...

  6. session详解

    什么是Session 对Tomcat而言,Session是一块在服务器开辟的内存空间,其存储结构为ConcurrentHashMap: Session的目的 Http协议是一种无状态协议,即每次服务端 ...

  7. 一个 div 实现扇形图（锥形渐变）

    需要引用的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min ...

  8. mysql 查询表,视图,触发器,函数,存储过程

    1. mysql查询所有表: SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = '数据库名' AND  TAB ...

  9. 解析xml并且导入mysql

    https://www.zhihu.com/question/28139319 解析超过500G的xml 写入mysql,如何尽快写入? 解析超过500G的xml 写入mysql,如何尽快写入? 现在 ...

  10. 复旦大学2015--2016学年第二学期高等代数II期末考试情况分析

    一.期末考试成绩班级前几名 胡晓波(90).杨彦婷(88).宋卓卿(85).唐指朝(84).陈建兵(83).宋沛颖(82).王昊越(81).白睿(80).韩沅伯(80).王艺楷(80).张漠林(80) ...