一、使用单元格居中

<!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. go项目，出现too many open files

    刚开始碰到这种异常,以为是代码写的有问题,准备抽时间去改,等有时间正式此问题的时候,发现这种问题一般只会在linux系统上出现,原因如下:linux系统限制了文件打开的最大文件句柄数,系统默认一般是1 ...

  2. python GIL解释器

    1.GIL是什么? GIL全称Global Interpreter Lock,即全局解释器锁. 作用就是,限制多线程同时执行,保证同一时间内只有一个线程在执行. GIL并不是Python的特性,它是在 ...

  3. vue中的Swiper使用slideTo提示no function

    参考官网资料解决:

  4. java SE02

    目录 五.面向对象 1. 封装 2. 多态 3. 继承 六.内部类 1. 局部内部类 2. 局部内部类 3. 静态内部类 4.匿名内部类 七.异常 1. 五个关键字 2. 自定义异常 五.面向对象 1 ...

  5. 前端下载csv文件

    var str = [ 'ssssssssssssssssssssssssssssssssssssssss' ]; var uri = 'data:text/csv;charset=utf-8,%EF ...

  6. iOS开发之UIImage在压缩时失真问题，压缩图片的大小

    今天遇到UIImage在压缩时失真问题,压缩图片的大小图片模糊 错误的方案 /** * 压缩图片 * image:将要压缩的图片 size:压缩后的尺寸 */ -(UIImage*) OriginIm ...

  7. 关于XAF中ListView慢的总结与改善

    关于XAF中ListView慢的总结与改善: 一.数据访问模式改善:ListView中DataAccessMode中的改变:默认模式是Client,这在大多数情况下,适当的使用Server,Serve ...

  8. PK获取面积

    BOOL PK_AskFaceAreas(tag_t face_tag, double tol, double &areas) {//获得面积 tag_t ps_tag = NULL_TAG; ...

  9. Linux配置文件和网络常用命令总结

    Linux应用配置大全 Linux网络基本配置 最小化安装的话是没有ifconfig命令的需要使用yum search ifconfig查找,然后yum install net-tools.x86_6 ...

  10. 软件工程日报九——SQLite的安装与配置

    安卓stuio的数据库连接需要SQLite,现在进行安装与配置 一进官网下载sqlite-dll-win32-x86.zip和sqlite-tools-win32-x86.zip 二.在下载目录进行解 ...