一、使用单元格居中

<!DOCTYPE html>

<html>

<head>

    <title>测试</title>

</head>

<style type="text/css">

    /* 使用单元格居中 */

    .out {

        width: 400px;

        height: 400px;
        background: pink;
        display: table-cell;
        text-align: center;

        vertical-align: middle;

    }

    .content {

        width: 100px;

        height: 100px;

        display: inline-block;

        background: coral;

    }

</style>

<body>

    <div class="out">

        <div class="content">

        </div>

    </div>

</body>

</html>

二、弹性盒子 flex

<!DOCTYPE html>

<html>

<head>

    <title>测试</title>

</head>

<style type="text/css">

    /* 使用弹性盒子 */

    .out {

        width: 400px;

        height: 400px;

        background: rgb(109, 106, 107);

        display: flex;

    }

    .content {

        width: 100px;

        height: 100px;

        display: inline-block;

        background: coral;

        margin: auto;

    }

</style>

<body>

    <div class="out">

        <div class="content">

        </div>

    </div>

</body>

</html>

三、使用transform移动定位

<!DOCTYPE html>

<html>

<head>

    <title>测试</title>

</head>

<style type="text/css">

    /* 使用弹性盒子 */

    .out {

        width: 400px;

        height: 400px;

        background: powderblue;

        position: relative;

    }

    .content {

        width: 100px;

        height: 100px;

        background: coral;

        position: absolute;

        top: 50%;

        left: 50%;

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

    }

</style>

<body>

    <div class="out">

        <div class="content">

        </div>

    </div>

</body>

</html>

四、margin-left、margin-top

<!DOCTYPE html>

<html>

<head>

    <title>测试</title>

</head>

<style type="text/css">

    /* 使用弹性盒子 */

    .out {

        width: 400px;

        height: 400px;

        background: powderblue;

        position: relative;

    }

    .content {

        width: 100px;

        height: 100px;

        background: coral;

        position: absolute;

        margin-top: 50%;

         margin-left: 50%;

    }

</style>

<body>

    <div class="out">

        <div class="content">

        </div>

    </div>

</body>

</html>

div垂直居中的4种方式方式的更多相关文章

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

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

  2. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

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

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

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

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

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

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

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

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

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

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

  8. 让DIV垂直居中的几种办法

    1.使用CSS3 的伸缩盒布局 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  9. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  10. css布局 - 垂直居中布局的一百种实现方式（更新中...）

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

随机推荐

  1. SAP 文档必须包含正确的根元素

    --------------------------- LoadXML Malformed XML Error --------------------------- 文档必须包含正确的根元素. -- ...

  2. CF单机版终极猎手30人版安装教程

    本游戏是CF的单机版本,内含终极猎手30人版,可变身四种终极猎手.这个版本只有这一种模式,没有其他的幽灵模式.生化模式.爆破模式.团队模式等等,如果想玩上述的模式,你可以在其他地方找.值得注意的是这个 ...

  3. LP1-5:接口测试方法

  4. oracle 行转列，动态年份，月份列。已解决！

    -----------------存储过程包体----------- procedure GetComparativeAnalysisTB(p_StartTime varchar2, ----开始时间 ...

  5. JS 动态获取 Url 参数(封装函数）

    话不多说直接上代码: 封装函数如下: (如果urls固定,可以只写一个name变量) getQueryString(name, urls) { var url = urls; // 获取URL // ...

  6. C++ 手动实现队列(queue) （课后作业版）

    #include <iostream> using namespace std; template <typename T> class Queue { public: Que ...

  7. Cinder 对接本地LVM存储

    系统安装lvm2 yum install lvm2 1.创建 loop 设备 dd if=/dev/zero of=volume_test bs=51200 count=1M 2.挂载loop设备 l ...

  8. 【Frida】Java反射调用

    通过反射调用,获取类名 参数Object obj 类名 String str 方法名 static Object a(Object obj, String str) { try { return ob ...

  9. Burp学院-OS命令注入

    1.OS command injection, simple case. 最简单的命令执行,[|] 两个只要有一个为True就执行 2.Blind OS command injection with ...

  10. selenium定位元素不稳定的解决方式

    1 显示的进行时间上的等待 2 能够查到元素的时候可以使用js注入,单击 element = driver.find_element(*loc) driver.execute_script(" ...