<!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. Flex(flash)检测摄像头的3种状态(是否被占用,没安装摄像头,正常)

    在视频程序的编写过程中,我们经常要使用摄像头,在使用摄像头前有必要对摄像头的现有状态做个检测: 1.被占用 2.没安装摄像头 3.正常 camera=Camera.getCamera();       ...

  2. SQL主外键和子查询

    主键 数据库主键是指表中一个列或列的组合,其值能唯一地标识表中的每一行.这样的一列或多列称为表的主键,通过它可强制表的实体完整性.当创建或更改表时可通过定义 PRIMARY KEY约束来创建主键.一个 ...

  3. Android ART运行时与Dalvik虚拟机

    这几天在做一个项目时需要在Android中使用OSGi框架(Apache Felix),于是在一个android 4.4.2 版本系统的某品牌的平板上实验. 实验内容很简单:把felix包里的feli ...

  4. box-shadow 的一些使用

    1.只有左侧有阴影 box-shadow: -10px 0px 3px 1px #aaaaaa;

  5. Delphi项目构成之单元文件PAS

    单元文件是Pascal源文件,扩展名为.pas. 有三种类型的单元文件: 窗体/数据模块和框架的单元文件(form/data module and frame units),一般由Delphi自动生成 ...

  6. 学习C++.Primer.Plus 7 函数

    C++的返回值类型不能是数组 函数原型中的变量名相当于点位符,因此不要求提供变量名. void cheers(int); C++中不指定参数列表时就使用活力号: void saybye(...); 通 ...

  7. scala 学习笔记(05) OOP（中）灵活的trait

    trait -- 不仅仅只是接口! 接上回继续,scala是一个非常有想法的语言,从接口的设计上就可以发现它的与众不同.scala中与java的接口最接近的概念是trait,见下面的代码: packa ...

  8. 利用ganymed-ssh2远程执行其它Linux机器上的shell命令

    实际应用中,有时候需要从web管理界面上,远程去启动其它linux主机上的程序,利用ssh协议可以方便的满足这一需求.事实上hadoop架构中,从nn上启动dn时,就是利用了免密码ssh登录.gany ...

  9. javascript：查找“跳号”号码

    业务背景:航空货运系统中,“货运代理商”会定期从“航空公司”领取一定数量的纸质运单(每张纸上有一个单号),这些单号都是连续的(即:每次可以理解为领取一个“号段”),而且每张单子都要向航空公司交纳一定的 ...

  10. 让Apache Shiro保护你的应用

    在尝试保护你的应用时,你是否有过挫败感?是否觉得现有的Java安全解决方案难以使用,只会让你更糊涂?本文介绍的Apache Shiro,是一个不同寻常的Java安全框架,为保护应用提供了简单而强大的方 ...