<!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. Unity 实现物体破碎效果（转）

    感谢网友分享,原文地址(How to Make an Object Shatter Into Smaller Fragments in Unity),中文翻译地址(Unity实现物体破碎效果) In ...

  2. I/O工作机制

    I/O问题是任何编程语言都无法回避的问题,可以说I/O是整个人机交互的核心问题,因为I/O是机器获取和交换信息的主要渠道.java的I/O操作类在包java.io下,大概有将近80个类,这些类大概可以 ...

  3. Oracle round函数是什么意思?怎么运用?

    如何使用 Oracle Round 函数 (四舍五入) 描述 : 传回一个数值,该数值是按照指定的小数位元数进行四舍五入运算的结果. SELECT ROUND( number, [ decimal_p ...

  4. Lambda表达式详解（转载）

    原文链接:http://www.cnblogs.com/knowledgesea/p/3163725.html lambda简介 lambda运算符:所有的lambda表达式都是用新的lambda运算 ...

  5. CentOS RHEL 安装 Tomcat 7

    http://www.davidghedini.com/pg/entry/install_tomcat_7_on_centos This post will cover installing and ...

  6. css3 box-sizing属性

    个人总结: 如果需要兼容IE6 IE7,使用content-box.现在流行bootstrap3,需注意它使用的是border-box. box-sizing属性可以为三个值之一:content-bo ...

  7. 黑暗圣经---物业公司CTO/CEO改如何给老板推荐物业信息化产品

    多年前一次偶然的机会进入到物业信息化行业,在这个过程中认识很多奋战在物业一线的技术大牛.很多时候都会介绍一些朋友给我认识一下,帮我推荐一下我们闻风多奇的物业管理平台.很多朋友看完我们的系统之后都会很开 ...

  8. Regular Expression Matching

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  9. jboss EAP 6.2+ 通过代码控制JNDI数据源

    通过Jboss提供的API,可以操控JBoss,效果跟在管理控制台手动操作完全一样,下面是示例代码: 一.pom.xml添加依赖项 <dependency> <groupId> ...

  10. 分布式中使用Redis实现Session共享(一)

    上一篇介绍了如何使用nginx+iis部署一个简单的分布式系统,文章结尾留下了几个问题,其中一个是"如何解决多站点下Session共享".这篇文章将会介绍如何使用Redis,下一篇 ...