让DIV垂直居中的几种办法

时间：2022-10-08 17:05:57

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教程&colon;div垂直居中的N种方法以及多行文本垂直居中的方法

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

  3. CSS教程&colon;div垂直居中的N种方法&lbrack;转&rsqb;

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

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

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

  5. div垂直居中的N种方法 单行&sol;多行文字&lpar;未知高度&sol;固定高度&rpar;

    说到这个问题的时候,也许有人会问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. SVN cleanup操作反复失败解决办法

    今天在更新项目的时候遇到一个问题,按惯例要cleanup才能重新更新.但是很不幸,在cleanup的时候又遇到了问题! 1    svn cleanup failed–previous operati ...

  2. 使用PHP计算上一个月的今天

    一日,遇到一个问题,求上一个月的今天. 最开始我们使用 strtotime(“-1 month”) 函数求值,发现有一个问题,月长度不一样的月份的计算结果有误. 比如:2011-03-31,得到的结果 ...

  3. JavaEE5种常见的设计模式

    1.工厂模式:比如你写了个应用,里面用到了数据库的封装,你的应用可以今后需要在不同的数据库环境下运行,可能是oracle,db2,sql server等, 那么连接数据库的代码是不一样的,你用传统的方 ...

  4. 深入详解SQL中的Null

    深入详解SQL中的Null NULL 在计算机和编程世界中表示的是未知,不确定.虽然中文翻译为 “空”, 但此空(null)非彼空(empty). Null表示的是一种未知状态,未来状态,比如小明兜里 ...

  5. Unity3D 3D横版跑酷

    Unity3d  3D横版跑酷系列(Character Controller组件) @广州小龙 目前在做一个3D跑酷的横版游戏,目前说一下 Character Controller组件! 1.Slop ...

  6. 鸟书shell 学习笔记&lpar;一&rpar; shell专注于概念和命令

    变量   variableName=value 等号左右不能有空格 变量内容有空格须要用"或者'括起来,可是 v="hello $name" $保持原有功能,单引號则不行 ...

  7. HDU4686——Arc of Dream矩阵快速幂

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4686 题目大意: 已知a0=A0, ai=Ax*ai-1+Ay; b0=B0, bi=Bx*bi-1 ...

  8. 【Java入门提高篇】Day8 Java内部类——匿名内部类

    今天来看看另一个更加神奇的类--匿名内部类. 就像它的名字表示的那样,这个类是匿名的,用完之后,深藏功与名,就像扫地僧那样默默潜藏于深山之中.匿名内部类不仅没有名字,连class关键字都省掉了,而且匿 ...

  9. celery异步认知

    celery是异步任务的框架 是由python实现的异步框架. 在使用celery我们经常分为三个部分, 第一部分就是我们所说的客户端, 就是发起异步任务的一方, 第二部分 任务队列 broker 第 ...

  10. 附003&period;Docker Compose命令详解

    一 Docker Compose命令格式 Usage: docker-compose [-f <arg>...] [options] [COMMAND] [ARGS...] docker- ...

相关文章