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. Java 图片切圆角，消除锯齿

    public static BufferedImage setBorderRadius(BufferedImage srcImage, int radius){ int width = srcImag ...

  2. (转)chm格式的电子书打开是空白的解决办法

    当我们从网络上下载chm格式的电子书到本地后,打开就发现chm格式的电子书右边的目录是正常的,但是chm格式的电子书内容部分却是空白的情况,很多时候我们都以为是中毒了,但是用杀毒软件却杀不出来,其实很 ...

  3. 函数malloc的实现源代码

    /****************************************************************Copyright 1990, 1994, 2000 by AT&am ...

  4. C# 计算日期时间的间隔天数

    DateTime oldDate = ,,); DateTime newDate = DateTime.Now; // Difference in days, hours, and minutes. ...

  5. C#析构函数，类运行结束后运行

    public class Students { //创建对像时使用 public Students(string name, int age, char gender, int englist, in ...

  6. POJ 1845

    接下来交给大家一个网上查不到的解题方法 题目是酱找出a^b的因子的和答案对9901取模 我们将a可变成这样e1^x1*e2^x2...(ei为素数) 答案就变成这样(e1^0+e1^1...e1^x1 ...

  7. .attr()和.prop()和.css()的区别

    是不是新手都会遇到这个问题?遇到过一次,在网上搜一搜,综合成了下面这样.重点参考了dolphin的‘jQuery的attr与prop’, 写的很清楚呢. 一般attribute翻译成中文术语为“特性” ...

  8. 使用Hammer.js的H5页面开发DOM的一些小说法

    前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. ...

  9. jquery 点点滴滴小记

    字符截取显示 var text = $(".content").text(); var textNum = text.length; var textInt = text.slic ...

  10. JavaScript电话号码正则

    var telNumRE = /^((\d{11})|(\d{3,4}-)*(\d{7,8})+(-\d{1,4})*|(\d{5}))$/; 可以截取以下内容: 11位手机号:18911931207 ...