<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3瀑布布局</title>
    <style type="text/css">

        /*****************方法1 上下左右居中******************/
        .container{
            width:600px;
            height:400px;
            border:1px solid blue;
            justify-content:center; /*元素的各项周围留有空白：*/
            align-items:center; /***元素垂直居中*****/
             display: flex;
          }
        .box {
            width: 200px;
            height: 100px;
            border: 1px red solid;
        }

        /********************方法2 结束*****************/
        /*********方法2  上下左右居中**********开始**
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 600px;
            height: 400px;
            border:1px solid blue;
            position: relative;
        }

     .box{
         width:200px;
         height:100px;
         border:1px red solid;
         float: left;
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -100px;
         margin-top: -50px;

     }*/
        /**********************结束****************/

 </style>
</head>
<body>
<div class="container">
    <div class="box">

    </div>
</div>
</body>
</html>

小 div在大 div中左右上下居中的更多相关文章

  1. Day_09【常用API】扩展案例2_测试小字符串在大字符串中出现的次数

    分析以下需求,并用代码实现 1.键盘录入一个大字符串,再录入一个小字符串 2.统计小字符串在大字符串中出现的次数 3.代码运行打印格式: 请输入大字符串: woaiheima,heimabutongy ...

  2. 小div在大div中垂直居中，以及div在页面垂直居中

    <html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...

  3. 小div在大div中垂直居中方式

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

  4. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  5. 小div在大div里面 垂直居中

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  6. java 11-8 在大串中查找小串的案例

    1.统计大串中小串出现的次数 举例: 在字符串"woaijavawozhenaijavawozhendeaijavawozhendehenaijavaxinbuxinwoaijavagun& ...

  7. 大div中，三个小div水平居中

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

  8. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  9. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

随机推荐

  1. Redis的安装和使用

    Redis 安装redis: 将将要安装redis文件夹放到一个盘中 通过命令行切换到放文件的地方 安装成功后,将文件夹中的扩展放入wamp/php/ext中,然后配置php.ini,重启服务器. 使 ...

  2. ThreadLocal用法和实现原理

    如果你定义了一个单实例的java bean,它有若干属性,但是有一个属性不是线程安全的,比如说HashMap.并且碰巧你并不需要在不同的线程中共享这个属性,也就是说这个属性不存在跨线程的意义.那么你不 ...

  3. 一个简单的Android富文本TextView实现

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica; color: #555555 } p.p2 { margin: 0.0p ...

  4. Android屏幕禁止休眠的方法

    实现这一功能的方法有两种,一种是在Manifest.xml文件里面声明,一种是在代码里面修改LayoutParams的标志位.具体如下: 1.在Manifest.xml文件里面用user-permis ...

  5. Oracle 使用MERGE INTO 语句更新数据

    /*Merge into 详细介绍MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询,连接条件匹配 ...

  6. 浅谈python web框架中的orm设计

    看了一下廖雪峰的那个web框架,其实就是封装了web.py,请求使用异步并将aiomysql做为MySQL数据库提供了异步IO的驱动,前端部分则整合了jinja.其中最难的应该是orm部分了. 下面是 ...

  7. centos6 pyotp bug修复

    yum install python-pip -ypip install pyotp vim /usr/lib/python2.6/site-packages/pyotp/utils.py... 49 ...

  8. linux numfmt 命令--转换数字

    numfmt SYNOPSIS numfmt [OPTION]... [NUMBER]... DESCRIPTION Reformat NUMBER(s), or the numbers from s ...

  9. 清北学堂2017NOIP冬令营入学测试P4749 C’s problem(c)

    P4746 C's problem(c) 时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试 描述 题目描述 小C是一名数学家,由于它自制力比较差 ...

  10. caffe的python接口学习（3）：训练模型（training)

    如果不进行可视化,只想得到一个最终的训练model, 那么代码非常简单,如下 : import caffe caffe.set_device(0) caffe.set_mode_gpu() solve ...