效果：

实现代码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. MySQL高级查询与编程作业目录 （作业笔记）

    MySQL高级查询与编程笔记 • [目录] 第1章 数据库设计原理与实战 >>> 第2章 数据定义和操作 >>> 2.1.4 使用 DDL 语句分别创建仓库表.供应 ...

  2. AVD Pixel_2_API_30 is already running. lf that is not the case, delete the files at

    AVD Pixel_2_API_30 is already running. lf that is not the case, delete the files at C:\Users\Adminis ...

  3. Linux 使用 split 命令分割文件

    使用方法: $ split --help 用法:split [选项]... [输入 [前缀]] 将输入内容拆分为固定大小的片段并输出到"前缀aa"."前缀ab" ...

  4. Window10系统修改hosts文件的方法

    背景: 调试smtp程序时遇到问题,度娘说需要修改hosts文件 使用老方法修改了很久,始终无法保存 又百度了一下,在此重温,以加深记忆 方法: Step1.同时按住Windows+X Step2.选 ...

  5. js获取设备公网ip + 服务器根据公网ip 获取IP信息

    1.前言 本来呢,想实现js定位功能,最少定位到城市,一开始,使用的是搜狐的api直接获取数据,可是,有时候搜狐不可靠,只能得到 公网ip,其他信息无用,就像这样 2.既然这样,还不如我自己请求自己的 ...

  6. Echart可视化学习（七）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 官网找到类似实例, 适当分 ...

  7. 【Spring专场】「MVC容器」不看源码就带你认识核心流程以及运作原理

    前提回顾 之前已经写了很多问斩针对于SpringMVC的的执行原理和核心流程,在此再进行冗余介绍就没有任何意义了,所以我们主要考虑的就是针对于SpringMVC还没但大框架有介绍的相关内容解析分析和说 ...

  8. Fio使用和结果分析

    感谢,参考自:https://blog.51cto.com/qixue/1906768: 官方说明文档,很有用:https://fio.readthedocs.io/en/latest/index.h ...

  9. [USB波形分析] 全速USB波形数据分析(二)

    在上一篇文章全速USB波形数据分析(一)介绍了全速USB的数据包(Packet)的组成,数据的类型等基本知识.这篇文章介绍USB的几种传输方式 事务(Transaction) USB协议定义了三种不同 ...

  10. 1月29日 体温APP开发记录

    1.阅读构建之法 现代软件工程(第三版) 2.观看Android开发视频教程最新版 Android Studio开发 3.高德地图API下载获取key