效果：

实现代码1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body{margin: 0; padding: 0;}

        #div1{

            margin-top: 100px;

            margin-left: 150px;

            width: 300px;

            height: 300px;

            background-color: red;

            position: relative;

        }

        #div2{

            width: 120px;

            height: 120px;

            background-color: black;

            position: absolute;

            /*(300-120)/2/300*/

            top: 30%;

            left: 30%;

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

</html>

实现代码2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body{margin: 0; padding: 0;}

        #div1{

            margin-top: 100px;

            margin-left: 150px;

            width: 300px;

            height: 300px;

            background-color: red;

        }

        #div2{

            width: 120px;

            height: 120px;

            background-color: black;

            /*(300-120)/2/300=30%*/

            position: relative;

            top: 30%;

            left: 30%;

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

</html>

实现代码3：

如何实现固定宽高的DOM元素的水平垂直居中的更多相关文章

  1. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

  2. css固定宽高DIV内部元素垂直居中的方法

    应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...

  3. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  4. 固定宽高的DIV绝对居中示例

    看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数, ...

  5. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  6. 偏前端 - 不是固定宽高，页面随设备同比 放大/缩小 展示。不妨看看rem单位，你就有眉目上手做了！！！

    为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...

  7. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  8. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  9. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

随机推荐

  1. Browser Events 常用浏览器事件

    事件 说明 click 鼠标点击时触发此事件 dblclick 鼠标双击时触发此事件 mousedown 按下鼠标时触发此事件 mouseup 鼠标按下后松开鼠标时触发此事件 mouseover 当鼠 ...

  2. Java中的构造方法「注意事项」

    构造方法是专门用来创建对象的方法,当我们通过关键字new来创建对象时,其实就是调用构造方法. 语法: public 类名称(参数类型 参数名称){ 方法体 } 注意事项: 构造方法的名称必须和所在的类 ...

  3. 使用docker快速部署一个consul集群

    作为一个开发者,有时候需要一个集群环境,之前的做法要么就是使用多个虚拟机,要么就是采用不同的端口来模拟,但是虚拟机比较占内存,而且启动慢,采用不同的端口来模拟,管理起来比较麻烦一些,程序隔离性差一些. ...

  4. openmesh - impl - Remove Duplicated Vertices

    openmesh - impl - Remove Duplicated Vertices 关于openmesh元素删除实现的介绍参见:openmesh - src - trimesh delete a ...

  5. DRF框架在嵌套关系下实现嵌套对象字段的过滤

    当需要对关联对象的字段进行选择性显示时,在所对应的serializer类中声明引用的字段. 例如: class TrackSerializer(serializers.ModelSerializer) ...

  6. python 之 pip、pypdf2 安装与卸载

    pip是个啥? pip 是一个现代的,通用的 Python 包管理工具.提供了对 Python 包的查找.下载.安装.卸载的功能. 第一步:pip 下载:https://pypi.org/projec ...

  7. Django_MVT（二）

    一.MVT简介 M全拼为Model,与MVC中的M功能相同,负责和数据库交互,进行数据处理. V全拼为View,与MVC中的C功能相同,接收请求,进行业务处理,返回应答. T全拼为Template,与 ...

  8. VM搭建Hadoop环境遇到的问题

    原文链接:https://www.toutiao.com/i6482644128860471822/ 一.Slave2中sshd服务一直处于启动失败状态 查看配置文件 c 发现配置文件末尾slave2 ...

  9. rootckeck

    rootcheck rootcheck1.问题描述2.analysis3.solution4.总结 1.问题描述 经常会有听说root手机,其实质就是让使用手机的人获得手机系统的最大权限.因为andr ...

  10. Ultimaker2+使用指南

    USB打印 使用最新的官方软件即可进行USB3D打印. 使用时在选项上进行预热以及x,y,z重新归零定位,每次开始都要做. SD卡打印 比较方便,因为电脑可能拿去做其他事情. 打印机堵塞 退出耗材时候 ...