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. Mysql -- 外键的变种 三种关系

    一.介绍 因为有foreign  key的约束,  使得两张表形成了三种关系 多对一      多对多   一对一 二.如果找出两张表之间的关系 #.先站在左表的角度去找 是否左表的多条记录可以对应右 ...

  2. 【原创】大数据基础之Kudu（2）移除dead tsever

    当kudu有tserver下线或者迁移或者修改hostname之后,旧的tserver会一直以dead状态出现,并且tserver日志中会有大量的连接重试日志,一天的错误日志会有几个G, W0322 ...

  3. 在CentOs7上部署Gunicorn

    Gunicorn 的作用与优点这里就不再赘述,如不知道你也不会找这些对吧? 正文 安装简单,直接使用pip即可 pip3 install gunicorn 昨日在 Centos 中想部署Gunicor ...

  4. 有道云笔记Markdown上传本地图片的方法

    有道云笔记截图&保存   方法有多种,例如:开通有道云笔记VIP会员.先将图片文件上传到有道云笔记后使用图片的分享链接.说到底还是使用的 Markdown 的图片功能 ![图片名称](图片链接 ...

  5. Jace Config

    一.jace配置 1.按照Jace 的默认IP配置自己电脑的IP网段(同一个网段),连接上之后使用默认的密码登录,导入tridiumEMEA…..的授权文件,之后创建Station,选择需要的协议驱动 ...

  6. 简单几步让网站支持https，windows iis下https配置方式

    1.https证书的分类 SSL证书没有所谓的"品质"和"等级"之分,只有三种不同的类型.SSL证书需要向国际公认的证书证书认证机构(简称CA,Certific ...

  7. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  8. IdentityServer4 密码模式认证

     授权服务器设置 添加用户 添加测试用户,也可以从数据库查 public static List<TestUser> GetTestUser() { return new List< ...

  9. 【Linux】-- 在linux上安装mysql及基本操作

    1.MySQL的安装 1.删除mariadb数据库 yum remove mariadb-libs.x86_64 CentOS7默认安装mariadb数据库,所以要先删除 2.下载mysql源 进入m ...

  10. Django中的Form表单验证

    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...