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. C#。总结

    数据类型--变量与常量--运算符与表达式--语句(if,for)--数组--函数--结构体一.数据类型: (一)内建类型 整型(int short long byte uint ushort ulon ...

  2. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  3. Unable to find manifest signing certificate in the certificate(Visual studio)

    今天打开之前做的项目,突然得到很奇怪的编译错误: Unable to find manifest signing certificate in the certificate 网上搜一下,有两个方法, ...

  4. DX笔记之六------游戏画面绘图之透明特效的制作方法

    原文链接:http://blog.csdn.net/zhmxy555/article/details/7338082 透明效果 由于所有的图文件都是以矩形来储存的,我们也许会需要把一张怪兽图片贴到窗口 ...

  5. dede后台反应特别慢-转

    找到织梦后台管理目录下的/templets/index_body.htm文件 将第25行至第35行部分js代码注释掉. 就这么简单

  6. DIV 遮挡问题总结

    1.DIV被Silverlight遮挡, 加入windowless参数即可. <object id=”silverlight” data=”data:application/x-silverli ...

  7. linux pc syncy安装问题

    linux pc 上安装syncy遇到的坑 pycurl安装可以指定curl-config,这个是根据自己机器libcurl安装位置确定,不在默认位置时要指定:python setup.py inst ...

  8. iOS界面调试工具 Reveal－备用

    Reveal是一个iOS程序界面调试工具.使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面. 对于动态或复杂的交互界面,手写UI是不可避免的.通过Reveal,我们可以方便地调试 ...

  9. m2eclipse插件安装

    一.给Eclipse安装maven的插件 m2eclipse 1 打开eclipse 2 Help -->Eclipse MarketPlace,在打开的界面搜索框中输入maven查找m2ecl ...

  10. ubuntu安装openssh-server

    openssh-server是依赖于openssh-clienr的,那ubuntu不是自带了openssh-client吗? 原因是自带的openssh-clien与所要安装的openssh-serv ...