方法一：

用一个“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. IIS Express 配置外部访问

    IIS Express是Visual Stuido自带的微型Web服务器,简单易用. IIS Express默认只允许本机访问,通过Visual Studio调试Web程序时,我们有时需要通过外部访问 ...

  2. CSS、HTML5、JS

    [att*=value]{}包含value属性的所有元素样式.[id*=div]{} a[href$=jpg]:after{} [att^=value]{}开头字符包含value属性的所有元素样式 [ ...

  3. windows防火墙命令

    删除防火墙:netsh advfirewall firewall delete rule name=%gate_rule_name% 添加防火墙:netsh advfirewall firewall ...

  4. treeview所有节点递归解法（转+说明）或者说递归的实际应用

    public void PrintTreeViewNode(TreeNodeCollection node) { foreach (TreeNode n in node) { Response.Wri ...

  5. Linux下几种文件传输命令 sz rz sftp scp

    Linux下几种文件传输命令 sz rz sftp scp 最近在部署系统时接触了一些文件传输命令,分别做一下简单记录: 1.sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具 ...

  6. redis.conf配置详细翻译解析

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...

  7. mybatis框架下解决数据库中表的列的字段名和实体类属性不相同的问题

    导包.... 实体类中的属性,getter,setter,tostring,构造等方法就不写了 private int id; private String orderNo; private floa ...

  8. 阿里云CentOS6.5搭建服务器JDK+tomcat+MySQL

    阿里云ECS,计划安装jdk:MySQL:tomcat: 一.yum Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的S ...

  9. 一首诗，致亲爱的csdn

    来自csdn的Rachel-Zhang姐姐 还记得--致亲爱的csdn 还记得你年轻时的摸样? 简单的文字,无瑕的脸庞. 现在的你,满脸风霜. 五粮液的广告,在我的文章中久久荡漾. 还记得当初的梦想? ...

  10. mysql中常用的控制流函数

    MySQL有4个函数是用来进行条件操作的,这些函数可以实现SQL的条件逻辑,允许开发者将一些应用程序业务逻辑转换到数据库后台. MySQL控制流函数: CASE WHEN[test1] THEN [r ...