方法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. jquery的扩展，及编辑插件的书写格式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Git配置全局账号密码避免每次拉取、提交输入账号密码

    前言 在大家使用github的过程中,一定会碰到这样一种情况,就是每次要push 和pull时总是要输入github的账号和密码,这样不仅浪费了大量的时间且降低了工作效率.在此背景下,本文在网上找了两 ...

  3. ORACLE 查询所有表、外键、主键等信息

    Select   a.Owner 外键拥有者, a.Table_Name 外键表, c.Column_Name 外键列, b.Owner 主键拥有者, b.Table_Name 主键表, d.Colu ...

  4. OkHttp源码剥离导入到eclipse中

    1.里面有两个类关于Android版本的我稍微修改过了,没有用的. 2.可以直接导入eclipse中,maven里面的jar包可能还有不需要的冗余,可以自己去剔除. https://github.co ...

  5. ltp-ddt realtime_cpu_load timeout

    # @name Worstcase Latency with cpu load by using cyclictest# @desc Measure latency under cpu load by ...

  6. html5 图片墙

    代码实例: <!DOCTYPE html> <html> <head> <style> body,html{ padding:0;margin:0;wi ...

  7. globalAlpha 示例

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. ExtJS5.0 菜鸟的第一天

    1.新项目开始啦,后台用户管理页面涉及到表格数据添加,修改内容比较多.准备用EXTJS框架搞下,对于我这种JS不咋地的人来说,还真是个挑战.整了2天,才搞出一个Hello,world!我也是醉了.. ...

  9. uwsgi部署django项目

    一.更新系统软件包 yum update -y 二.安装软件管理包及依赖 yum -y groupinstall "Development tools" yum install o ...

  10. leetcode-15双周赛-1289-下降路径最小和

    题目描述: 方法一:动态规划 O(N^3) class Solution: def minFallingPathSum(self, arr: List[List[int]]) -> int: n ...