一、使用单元格居中

<!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. asp汉字转拼音小写

    <%'//获取汉字的首字母 ,ANSII编码function getpychar(char) dim tmpp:tmpp=65536+asc(char) if(tmpp>=45217 an ...

  2. python 排序的几种方式(内置排序函数， 选择排序， 冒泡排序）

    #python 排序的方法 #Python 列表有一个内置的 list.sort() 方法可以直接修改列表 list1 = [1,3,5,10,2,1] list1.sort() print(list ...

  3. C#判断一个字符串是否为整数

    判断一个字符串是否为数字 使用int.TryParse()方法   利用int类型自带的TryParse(string, ou int) 方法可以解决问题,此方法通过对应的输入内容string,如果是 ...

  4. c# 在自定义类中控制form窗体中的控件 赋值或修改属性

    c# 在自定义类中控制form窗体中的控件 赋值或修改属性 首先在 自定义类 的外面  声明一个 委托模块 //声明一个委托模块 用来改变form1 窗体中的控件值 public delegate v ...

  5. cisco ios 密码恢复

    如果没有break键,使用仿真软件模仿一个break 密码恢复请执行以下步骤 1. 关闭或断开路由器电源 2.开启路由器.在通电后的前30秒内按下break键(或通过仿真程序发送一个间断序列),来中断 ...

  6. django搭建简易blog

    目录 下载安装django 创建一个django项目 创建一个django应用 models.py urls.py views.py admin.py 配置应用到项目下 路由设置urls.py set ...

  7. 【Direct3D 12】配置编译环境

    创建桌面应用程序 使用Visual Studio Community 2019创建一个桌面应用程序. 配置SDK版本.头文件.依赖库 右键单击创建的项目名称,选择Properties. 在Config ...

  8. WPF ItemsControl Command 绑定操作

    视图模型: using System.Collections.ObjectModel; using System.Diagnostics; using System.Windows.Input; us ...

  9. thymeleaf checkbox的回显

    最近用到了一些thymeleaf 的界面,有写问题一并写出来,如果这篇文章能给你带来帮助不胜荣幸,如果有问题,也请予以批评和改正 第一就是涉及到复选框的一个回显:例如我是单个复选框的是否选中 在< ...

  10. centos7部署Nacos单机版

    环境:centos7.6.80.213.8.31单机部署Nacos 1.安装java yum install java-1.8.0-openjdk yum install java-1.8.0-ope ...