一、使用单元格居中

<!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. (unsigned)short溢出后隐式转换为int

    同学被面试官问到一个细节中的细节,虽然个人觉得意义不大,但还是好奇并在和同学一起实验后搞清楚了,记录一下 如下: int main() { unsigned short a = 65535, b = ...

  2. 简单使用wireshark

    wireshark抓包工具 拓扑图: 拓扑图解释:终端用户使用wireshark抓包工具监听无线网卡,监听时,终端访问互联网,可实时监听网络抓包 操作步骤: 一,打开wireshark抓包工具,监听网 ...

  3. Python中文官方文档

    Python 2.7.18 的中文文档:  https://docs.python.org/zh-cn/2.7/ Python 3.10.6 的官方文档:https://docs.python.org ...

  4. 【1】部署环境python+pycharm+JDK+SDK+node安装+appium安装+Appium-python-client安装及配置+（模拟器）

    安装SDK检查命令  adb doctor 安装JDK,SDK是为了手机端应用程序的访问去做的基础库的搭建 JDK,SDK环境变量需要在一块,不要一个上,一个下 JAVA_HOME  Path  在一 ...

  5. 利用socket以及多线程、文件流等方法实现通信，互发文本信息以及文件

    服务器端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  6. 解决为知笔记docker镜像部署后登录连接mysql报错

    https://www.wiz.cn/zh-cn/docker 部署正常后登录一切正常,但开机重启后登录用户名时报错,是和非正常退出程序导致mysql sock锁,清除该锁文件后恢复正常. 1 C:\ ...

  7. 数值分析之数值积分 4.X

    求积公式 \[\int_{a}^{b} f(x) \mathrm{d} x \approx \sum_{k=0}^{n} A_{k} f\left(x_{k}\right) \] \(A_k\) 为求 ...

  8. 流（stream）如何理解？

    前言 如果你搜索输入输出函数,那么你会看到各种各样的流.那么这个流到底是什么东西呢,本文将形象地类比介绍通用的流. 怎样理解通用的流 流,顾名思义就是像水流一样可以流动的事物,可以在不同的领域来去自如 ...

  9. unity 实现Game窗口的Stats 【转自蛮牛】

    using UnityEngine;using System.Text;using UnityEditor; public class ShowFps : MonoBehaviour{ public ...

  10. PHP压缩二进制流转CSV文件

    接口返回的数据是二进制流,需先BASE64解码,再进行解压缩,压缩的文件格式为ZIP,需使用Inflater进行解压,即可得到文件. java demo: 转成PHP代码: 贴上 原始二进制流数据,需 ...