效果：

实现代码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. .net core中Grpc使用报错：The remote certificate is invalid according to the validation procedure.

    因为Grpc采用HTTP/2作为通信协议,默认采用LTS/SSL加密方式传输,比如使用.net core启动一个服务端(被调用方)时: public static IHostBuilder Creat ...

  2. 乌龟NOI

    题目描述 一只乌龟由于智商低下,它只会向左或向右走,不过它会遵循主人小h的指令:F(向前走一步),T(掉头). 现在小h给出一串指令,由于小h有高超的计算能力,他可以马上知道乌龟最后走到哪里.为了难倒 ...

  3. CentOS 7 连接不到网络解决方法(设置静态ip)

    使用VM12创建虚拟机并安装CentOS 7,但是安装完成后发现连接不到网络. ping jd.com发现不通 因为在创建虚拟机的时候 我们选择的是NAT模式 这里给出NAT模式下对应的的解决方法: ...

  4. css编写规则BEM

    简单来说,格式如下: .block { /* styles */ } .block__element { /* styles */ } .block--modifier { /* styles */ ...

  5. 网络协议学习笔记(二)物理层到MAC层，交换机和VLAN，ICMP与ping原理

    概述 之前网络学习笔记主要讲解了IP的诞生,或者说整个操作系统的诞生,一旦有了IP,就可以在网络的环境里和其他的机器展开沟通了.现在开始给大家讲解关于网络底层的相关知识. 从物理层到MAC层:如何在宿 ...

  6. PkavHTTPFuzzer爆破带验证码的后台密码

    之前对暴力破解这块并没有做系统的总结,况且登录这块也是个重头戏,所以我想总结总结. 环境准备 1.用phpstudy搭建phpwms1.1.2演示环境 2.pkavhttpfuzzer工具 漏洞复现 ...

  7. RocketMQ 介绍与安装

    目录 RocketMQ 介绍 MQ 介绍 MQ 作用 MQ 缺点 MQ 常见产品 RocketMQ 简介 RocketMQ 架构 RocketMQ 安装 RocketMQ 介绍 MQ 介绍 定义: M ...

  8. java之类的抽取与对象的创建

    Java语言之类的抽取 前言:世界由什么组成?This is a question.有人说是原子.分子,有人说是山川草木. 诚然,一千个人眼中有一千个哈姆雷特.而在程序员眼中,万物皆对象. 定义: 在 ...

  9. 【C++】指针和函数

    指针和函数 标签:c++ 目录 指针和函数 一.基本概念 定义: 指针的定义及使用: 二.指针的相互赋值 三.指针的运算 比较大小: 相减: 加减整数类型变量或者常量: 自增自减: 下标运算符[ ]: ...

  10. 【C++】类-多态

    类-多态 目录 类-多态 1. 基本概念 2. 运算符重载 2.1 重载为类的成员函数 2.2 重载为非成员函数 3. 虚函数 4. 抽象类 5. override与final 1. 基本概念 多态性 ...