一、使用单元格居中

<!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. 四，redis6版本的使用部署

    继第三章(https://www.cnblogs.com/123456likun/p/13841540.html) 官网发布最新的6版本,有新的数据类型出现,给了小编我极大的动力,决定写几张关于最新的 ...

  2. 前端下载图片、pdf、excel、world文件；前端下载图片和pdf文件；前端a标签下载图片和pdf文件；下载文件名称不生效原因

    https://blog.csdn.net/i_am_a_div/article/details/125050379 https://blog.csdn.net/moguzhale/article/d ...

  3. 2.6 EmpController

    package com.hy.controller; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.H ...

  4. VMware 关于mininet

    1.mininet安装是git clone git://github.com/mininet/mininet.git       (git clone http://github.com/minine ...

  5. vue项目引用vue-pdf打包多出worker.js文件

    问题描述:项目要用到pdf预览功能,因为是vue项目就是直接导入了vue-pdf组件,但是在进行打包的时候在dist文件夹下面多个worker.js文件,导致项目部署后预览pdf直接报了404 方案一 ...

  6. JS中面向对象的多种继承方式

    JS本身是基于面向对象开发的编程语言,面向对象开发中最重要的一个概念就是类. 类具有三大特性:封装.继承.多态 封装:类也是个函数,函数的目的是把一个功能代码进行封装,以此实现"低耦合高内聚 ...

  7. CodeGym自学笔记07——入门Java书籍

    入门Java书籍 Head First Java Java:The Complete Reference,作者:Herbert Schildt   这本书对初学者也很有好处.与前一本书的主要区别在于素 ...

  8. 带有FIFO硬件缓存的串口

    目录 51单片机的串口并没有配置FIFO硬件,故收发数据时只能一字节一字节地收发.最近接触了FIFO(先进先出)的硬件缓存,这样串口的配置就更多了一个维度. 以CH58x系列单片机为例,在CH583的 ...

  9. 单个Java文件连接数据库demo

      在单个java文件中,尝试连接数据库,跟python的模块包安装方式很接近,已经测试成功,把博客写一下,记录下来.   首先把jdb的驱动包下载下来,就是一个jar包,下面是官网下载地址 官网下载 ...

  10. JAVA的作用

    JAVA的用途广泛:1 .银行系统,政企信息系统,支付系统,大数据平台,网站平台. 2 .Saas云,手机app,云管理系统后台,电商系统后台,桌面工具. JAVA和PYTHON的抉择:JAVA是C语 ...