效果：

实现代码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. Windows下安装配置jdk

    1.jdk安装 从官网获取jdk安装包后, 双击图形化安装,一路next即可. 2.配置JavaHome 打开计算机->系统属性->高级系统设置->环境变量 在系统变量下面添JAVA ...

  2. Linux 进程调度

    线程状态(context) 程序计数器(Program Counter),它表示当前线程执行指令的位置. 保存变量的寄存器. 程序的Stack.通常来说每个线程都有属于自己的Stack,Stack记录 ...

  3. 责任链模式(python)

    rom abc import ABCMeta, abstractmethod class Handler(metaclass=ABCMeta): @abstractmethod def handle_ ...

  4. Linux shc 命令手册

    shc Generic shell script compiler. https://www.linux-man.cn/command/shc/ #Compile a shell script: sh ...

  5. Thrift框架-具体使用

    1.前言 使用thrift心得: (1)thrift是一个RPC的框架  ,RPC是远程过程调用协议:用于进行可扩展且跨语言的服务的开发,以构建在C++.Java.Python.PHP.Ruby.Er ...

  6. mongodb基础整理篇————常规操作[二]

    前言 简单整理一下常规操作. 正文 虽然一般说写代码看的是思想,但是呢,如果不知道mongodb 有哪些常用的操作,那么你怎么能知道mongodb是否符合你的需求,比如说如果聚合功能都没有,你得自己写 ...

  7. 论文翻译：2020_RESIDUAL ACOUSTIC ECHO SUPPRESSION BASED ON EFFICIENT MULTI-TASK CONVOLUTIONAL NEURAL NETWORK

    论文翻译:https://arxiv.53yu.com/abs/2009.13931 基于高效多任务卷积神经网络的残余回声抑制 摘要 在语音通信系统中,回声会降低用户体验,需要对其进行彻底抑制.提出了 ...

  8. C#进程调用FFmpeg操作音视频

    项目背景 因为公司需要对音视频做一些操作,比如说对系统用户的发音和背景视频进行合成,以及对多个音视频之间进行合成,还有就是在指定的源背景音频中按照对应的规则在视频的多少秒钟内插入一段客户发音等一些复杂 ...

  9. 【Java】Super

    Super super用于调用父类的属性.方法.构造器,与this相同. super的使用 属性与方法 在子类的方法或构造器中.通过使用"super.属性"或"super ...

  10. Git 基本操作指南

    Git 基本操作指南 内容概要 这个作业属于哪个课程 2022面向对象程序设计 这个作业要求在哪里 2022面向对象程序设计寒假作业1 这个作业的目标 Git & Github 作业正文 如下 ...