方法1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
}
 .child {
            width:200px;
            height:200px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
            background-color: red;
}

方法2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
        }
        .child {
            width:200px;
            height:200px;
            display:inline-block;
            background-color: red;
        }

方法3：

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child {
            width:200px;
            height:200px;
            background-color: red;
        }

方法4：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            position:relative;
        }
        .child {
            width:300px;
            height:200px;
            margin:auto;
            position:absolute;/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
            left:50%;
            top:50%;
            margin-left: -150px;
            margin-top:-100px;
            background-color: red;
        }

div中的div上下居中的更多相关文章

  1. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  2. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  3. 控制DIV中的文字绝对居中

        水平居中:<div align="center">Content</div>       垂直居中:<div style="line ...

  4. div中嵌套div水平垂直居中

    div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...

  5. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  6. 图片过大，在div中不压缩的居中方法

    在图片全屏轮播时,为了兼容更大的屏幕,我们常常把图片设置为很大,但是在显示的过程中,如果让图片随浏览器自动变化的话,常常会把图片压缩变形,影响显示,在不压缩图片的情况下,如何只显示图片的中间部分呢? ...

  7. html如何让label在div中的垂直方向居中显示？

    设置label的行高 line-height 和div的高度一致即可.

  8. 让 div中的div垂直居中的方法！！同样是抄袭来的(*^__^*)

    同样 ,水平居中很简单,给子div设置margin:0px auto; 垂直居中也不难::给父div设置display:table-cell;vertical-align:middle; 重点是dis ...

  9. div中嵌套div水平居中，垂直居中

    方法一: div(父):display:table; div(子):display:table_cell;margin:0 auto;vertical-align:middle; 方法二: div(父 ...

随机推荐

  1. 并行开发 8.用VS性能向导解剖你的程序

    原文:8天玩转并行开发——第八天 用VS性能向导解剖你的程序 最后一篇,我们来说说vs的“性能向导",通常我们调试程序的性能一般会使用Stopwatch,如果希望更加系统的了解程序,我们就需 ...

  2. Spring学习笔记（3）——快速入门

    项目目录如下: Say.java为主函数通过ApplicationContext创建对象,利用方法ClassPathXmlApplicationContext访问配置文件Applicationcont ...

  3. k3 cloud中数值以百分比的形式展示

    显示格式化字符串:P去掉区域设置的勾选

  4. Linux学习笔记之VIM编辑器

    此处根据需要,只罗列一些常用的指令和用法 五．VIM程序编辑器 Vi与vim Vi打开文件没有高亮注释,vim有,且vim是vi的高级版本 Vim默认打开文件为命令模式 i               ...

  5. H5手机端底部菜单覆盖中间部分内容的解决办法

    一.第一种Js动态计算中间内容的高度. 二.第二种给底部上面写个<div style="底部的高度"></div> 三.第三种给中间部分写一个margin- ...

  6. Maven仓库配置淘宝Maven镜像仓库

    settings.xml文件里面配置 <mirrors> <mirror>       <id>alimaven</id>       <name ...

  7. Java自定义注解学习

    1.定义一个枚举类,后面自定义注解时使用 package cn.tx.annotation.enums; /** * 定义枚举类型 * @author Administrator * */ publi ...

  8. Java反射学习-2 - 获取Class对象的三种方式

    package cn.tx.reflect; import java.lang.reflect.Constructor; import java.lang.reflect.Field; import ...

  9. 【Vim编辑器】基本命令

    前言 工作中免不了会使用到vim编辑文档,总会觉得不好上手,遂从网上找到一篇说明文档整理如下,共勉. 原文地址: https://www.cnblogs.com/shiyanlou/archive/2 ...

  10. .NET Core 使用 nlog 进行日志记录

    1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...