<!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. div根据内容改变大小并且左右居中

    div{ display:inline-block; width:auto; } 这个div的父元素text-align:center;

  2. [No000046]为什么跳槽加薪会比内部调薪要高？

    有网友在知乎提问: 最近在思考一个问题,为什么跳槽往往意味着加薪? 如果一个人确有价值,为什么在原来的公司没有在薪水上体现出来?如果没有价值,为什么跳槽以后就会加薪?还是可以单纯的解释为,应聘者和招聘 ...

  3. background-size背景缩放

    特别注意:背景图片缩放是相对于背景图片所在容器的宽高而言的,并不是相对背景图片本身的宽高 比如,一个div的宽高是300和200像素,背景图片本身的宽高是100*100的像素,设置div的backgr ...

  4. 分享一例测试环境下nginx+tomcat的视频业务部署记录

    需求说明:在测试环境下(192.168.1.28)部署一套公司某业务环境,其中:该业务前台访问地址: http://testhehe.wangshibo.com该业务后台访问地址: http://te ...

  5. Java读写文本文件

    1 字符输入(FileReader , char) import java.io.IOException; import java.io.FileReader; public class ep10_1 ...

  6. ACA烤箱菜单各项温度

    说明书找不到了, 网上找到的各项温度说明, 记一个备用 casserole 218度 cake 171度 backery 177度 frozen food 238度 patato 232度 roast ...

  7. 添加JSON Data到已经存在的JSON文件中

    早上在学习<Post model至Web Api创建或是保存数据>http://www.cnblogs.com/insus/p/4343833.html ,如果你第二添加时,json文件得 ...

  8. [转]Class 'Think\Log' not found

    转自:http://www.thinkphp.cn/topic/26815.html 解决偶尔出现 Class 'Think\Log' not found 的奇葩问题(并非每次必现,偶尔删除缓存可以解 ...

  9. hadoop1.2.1伪分布模式配置

    1.修改core-site.xml,配置hdfs <configuration> <property> <name>fs.default.name</name ...

  10. 【java】企业级分布式搜索平台Solr视频教程

    课程背景为了满足高可用.可扩展并容错的分布式搜索引擎.Solr是一个高性能,采用Java5开发, 基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现 ...