1.使用CSS3 的伸缩盒布局

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

    #container {

        height: 400px;

        width: 100%;

        background-color: gray;

        display:-webkit-flex;

        display: flex;

        flex-direction: row;

        -webkit-flex-direction: row;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-align-items: center;

        align-items: center;

    }

    #container > div{

        height: 200px;

        width: 200px;

        background-color: red;

    }

</style>

</head>

<body>

<div id="container">

    <div></div>

</div>

</body>

</html>

2.position:absolute 和 margin 联合使用

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

    #container {

        height: 400px;

        width: 100%;

        background-color: gray;

        position: relative;

    }

    #container > div{

        height: 200px;

        width: 200px;

        background-color: red;

        position: absolute;

        top: 50%;

        left: 50%;

        margin: -100px 0 0 -100px;

    }

</style>

</head>

<body>

<div id="container">

    <div></div>

</div>

</body>

</html>

3.position:absolute 和 margin: auto联合使用

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

    #container {

        height: 400px;

        width: 100%;

        background-color: gray;

        position: relative;

    }

    #container > div{

        height: 200px;

        width: 200px;

        background-color: red;

        position: absolute;

        top:;

        bottom:;

        left:;

        right:;

        margin: auto;

    }

</style>

</head>

<body>

<div id="container">

    <div></div>

</div>

</body>

</html>

4.position:absolute和translate的联合使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    html,body {

        height: 100%;

        margin: 0;

        padding: 0;

    }

    div {

        position: absolute;

        left: 50%;

        top: 50%;

        background-color: red;

        transform: translate(-50%,-50%);

        font-size: 440px;

    }

    </style>

</head>

<body>

    <div>W</div>

</body>

</html>

5.让div inline-block化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    html,body {

        height: 100%;

        margin: 0;

        padding: 0;

        text-align: center;

    }

    div {

        display: inline-block;

        background-color: red;

        font-size: 440px;

        vertical-align: middle;

    }

    i {

        display: inline-block;

        height: 100%;

        vertical-align: middle;

    }

    </style>

</head>

<body>

    <div>W</div><i></i>

</body>

</html>

让DIV垂直居中的几种办法的更多相关文章

  1. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  2. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  6. 让div垂直居中的5种方法

    方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: <div class=&quo ...

  7. 让div盒子相对父盒子垂直居中的几种方法

    div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

  8. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  9. 如何让一个div里面的div垂直居中？

    如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...

随机推荐

  1. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  2. spring项目中监听器作用-ContextLoaderListener(项目启动时,加载一些东西到缓存中)

    作用:在启动Web容器时,自动装配Spring applicationContext.xml的配置信息. 因为它实现了ServletContextListener这个接口,在web.xml配置这个监听 ...

  3. C#中的委托是什么？

    概述 委托类似C++中的函数指针,但是又有所不同.在C++中,函数指针不是类型安全的,它指向的是内存中的某一个位置,我们无法判断这个指针实际指向什么,对于参数和返回类型就更难以知晓.而.NET的委托则 ...

  4. [C#] 后端post的请求方法

    C# 模拟post请求方法 方法1: /// <summary> /// 模拟Post请求 /// </summary> /// <param name="ur ...

  5. cas+tomcat+shiro实现单点登录-3-CAS服务器深入配置(连接MYSQL)

    目录 1.tomcat添加https安全协议 2.下载cas server端部署到tomcat上 3.CAS服务器深入配置(连接MYSQL) 4.Apache Shiro 集成Cas作为cas cli ...

  6. （原）torch中微调某层参数

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221664.html 参考网址: https://github.com/torch/nn/issues ...

  7. 使用PHP-Barcode轻松生成条形码（一）

    最近由于工作需要,研究了一下PHP如何生成条形码.虽然二维码时下比较流行,但是条形码依然应用广泛,不可替代.园子里有很多讲利用PHP生成条形码的文章,基本上都是围绕Barcode Bakery的,它虽 ...

  8. dedecms _ 栏目无法更新

    dedecms 后台_  栏目无法更新: 那天我在移站,  出现了这个问题 例如这样的提示: 遇到问题咱就得解决啊: 解决方法如下: 进入dedecms后台 进入----系统-----系统基本参数-- ...

  9. HTML&CSS基础学习笔记1.25-input标签隐藏元素

    隐藏元素 有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden". ...

  10. 【Beta】Phylab2.0: Postmortem

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 主要解决同学们写物理实验报告时,处理数据的困难--巨大的计算量和不规范的物理报告数据处理格式.典型 ...