div盒子水平居垂直中的几种方法
<!DOCTYPE html>
<html>
    <head>
        <mete charset="utf-8"/>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            /*方案1、使用transforms属性的translate平移*/
            .div1{
                position: absolute;
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
              
            }
            .div2{
                position: absolute;
                width: 250px;
                height: 300px;
                border: 1px solid#000;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            margin 负间距
/*
1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置，
3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指盒子左上角顶点距离页面左、上边界的50%，
4.最后将该div分别左移和上移，使整个盒子居中，左移和上移的大小就是该DIV(包括border和padding)宽度和高度的一半。
*/
            .div3{
                position: absolute;
                width: 100px;
                height: 50px;
                border: 1px solid#000;
                margin-top: -26px;
                margin-left: -51px;
                left: 50%;
                top: 50%;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
</html>

div盒子水平居垂直中的几种方法的更多相关文章

  1. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  2. 使图片相对于上层DIV始终水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  4. Power BI官方视频(2) Power BI嵌入到应用中的3种方法

    今天给大家介绍3种将Power BI嵌入到应用中的方法. 本文原文地址:Power BI官方视频(2) Power BI嵌入到应用中的3种方法 Power BI系列文章地址:微软Power BI技术文 ...

  5. JavaScript确定一个字符串是否包含在另一个字符串中的四种方法

    一.indexOf() 1.定义 indexOf()方法返回String对象第一次出现指定字符串的索引,若未找到指定值,返回-1.(数组同一个概念) 2.语法 str.indexOf(searchVa ...

  6. 设置一个DIV块固定在屏幕中央（两种方法）

    设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...

  7. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  8. 【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）

    这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type ...

  9. div垂直水平居中的四种方法总结

    5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...

随机推荐

  1. 全平台网页播放器兼容H5与Flash还带播放列表

    许久不发文了,2018年第一篇文章,写点干货--关于网页播放器的问题.嗯,实际上我是在52破解首发的,当做新人贴. 目前来说,网页播放器不少,随便找找都能找到一大堆,然而好用的就那么几个,比如ckpl ...

  2. thinkphp5.0 ajax分页

    放到    ***thinkphp\library\think\paginator\driver\Ajaxbootstrap.php 分页的type参数为ajaxbootstrap <?php/ ...

  3. CentOS6配置Taiga

    背景 企业项目管理是一个比较复杂的事情,这个市场需求非常大,目前市面上也存在着teambition,tower等平台,但是这些工具平台目前都是付费才能有完整的功能,免费版根本不能满足团队的需求.一番调 ...

  4. CentOS7.6 yum方式安装mysql2.7.25

    在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB 1 下载并安装MySQL官方的 Yum Rep ...

  5. svn"database disk image is malformed"错误解决

    本文是svn出现类似如下问题的两种解决方案. svn: E200030: database disk image is malformed 一.最简单的方法,复制其它人的.svn/wc.db替换. 二 ...

  6. 论文阅读笔记四十四：RetinaNet:Focal Loss for Dense Object Detection(ICCV2017）

    论文原址:https://arxiv.org/abs/1708.02002 github代码:https://github.com/fizyr/keras-retinanet 摘要 目前,具有较高准确 ...

  7. docker报错：Failed to restart docker.service: Unit not found.

    前言:我之前安装好docker了,但是关机重启后,发现docker就没了 报错:Failed to restart docker.service: Unit not found.   解决方法: 1. ...

  8. 树上背包O（n*m^2）|| 多叉树转二叉树 || o(n*m)???

    #. 选课 描述 提交 自定义测试 问题描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有 ...

  9. MySQL基本操作练习

    -- 数据的准备 -- 创建一个数据库 create database python_test charset=utf8; -- 使用一个数据库 use python_test; -- 显示使用的当前 ...

  10. Knockout案例： 全选