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. 如何在sqlserver建立新用户并关联相应的数据库

    我们经常需要在数据库上建立有权限的用户,该用户只能去操作某个特定的数据库(比如该用户只能去读,去写等等),那么我们应该怎么在sqlserver上设置呢?下面的步骤有点长,只要一步一步跟着设置就行 方法 ...

  2. Jenkins学习之——(2)插件的安装

    本章节将讲解如何安装jenkins的插件. 其实jenkins本身不具有任何集成的功能,而是依靠众多的插件实现功能.就像eclipse一样,期本身只是一个编辑器,而当你安装了其他的第三方插件后,就能实 ...

  3. How to start the Virtualbox VMs under terminal

    Since we have servral machine on my testbed(fedora), and if I need start some VMs on that, I have to ...

  4. 旧版asp.net 发送邮件代码

    说到发送邮件发送,先提一下SMTP(呵呵,高手就跳过这一段吧!). SMTP的全称是“Simple Mail Transfer Protocol”,即简单邮件传输协议.它是一组用于从源地址到目的地址传 ...

  5. 读书笔记_Effective_C++_条款十七：以独立语句将new产生的对象置入智能指针

    int get_int(); void f(shared_ptr<int> a, int); //下面调用 f(new int(3), get_int());//如果是类而不是int就可以 ...

  6. poj3071

    题目大意,1<<n个球队比赛赛程是这样的 1 1    1 1   1 1  1 另dp[i][k]为k队进入第i场的概率 #include<iostream> #includ ...

  7. ./configure 时候报错c++ 编译器不能执行

    ./configure时报错:configure: error: C++ compiler cannot create executables .哎,今天重装测试服务器上的系统,设置好IP可以远程访问 ...

  8. Flask Jinjia2 与 react

    Jinjia2 这是flask使用的模板工具,利用render_template方法可以方便的将后端的数据传给前端. 但是如果要使用react呢. 我如果在jsx中直接使用{{}}是不能输出变量的. ...

  9. Spark学习笔记-三种属性配置详细说明【转】

    相关资料:Spark属性配置  http://www.cnblogs.com/chengxin1982/p/4023111.html 本文出处:转载自过往记忆(http://www.iteblog.c ...

  10. ubuntu安装openssh-server

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