代码:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>div居中</title>

  <style>

       * {

            margin:0;

            padding:0;

          }

          .content {

            width:400px;

            height:400px;

            background:orange;

            border: 1px solid green;

            position:relative;

            margin: 100px auto;

          }

          .nav {

            width:80px;

            height:80px;

            line-height:80px;

            text-align:center;

            background:green;

            margin: auto;

            position:absolute;

            left: 0;

            top: 0;

            bottom:0;

            right: 0;

          }

  </style>

</head>

<body>

  <div class="content">

         <div class="nav">这是内容</div>

    </div>

</body>

</html>

　　效果：

小div在大div中垂直居中方式的更多相关文章

  1. Day_09【常用API】扩展案例2_测试小字符串在大字符串中出现的次数

    分析以下需求,并用代码实现 1.键盘录入一个大字符串,再录入一个小字符串 2.统计小字符串在大字符串中出现的次数 3.代码运行打印格式: 请输入大字符串: woaiheima,heimabutongy ...

  2. 小div在大div中垂直居中，以及div在页面垂直居中

    <html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...

  3. 小 div在大 div中左右上下居中

    <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...

  4. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  5. 小div在大div里面 垂直居中

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  6. span(行级元素)在不定高的div(块级元素)中垂直居中的方法

    设置父级元素: align-items: center; display: flex;

  7. java 11-8 在大串中查找小串的案例

    1.统计大串中小串出现的次数 举例: 在字符串"woaijavawozhenaijavawozhendeaijavawozhendehenaijavaxinbuxinwoaijavagun& ...

  8. html中div使用CSS实现水平/垂直居中的多种方式

    CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...

  9. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

随机推荐

  1. dd命令笔记

    dd命令 用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换 参数 if=FILE 指定输入源文件, 缺省为标准输入, < if=input file > iflag=FLAGS 指 ...

  2. JAXB xml序列化应注意

    使用JAXB将对象序列化为XML时,发现有一个地方性能非常低,即 JAXBContext.newInstance(XXX.class); 建议将其提前创建好并作为变量保存,到时可直接使用其引用,而非重 ...

  3. odoo开发笔记 -- 提高访问安全性的一种方式

    场景描述: 最近在做项目的过程中,需要需要将odoo应用集成到其他系统中, 在对方的系统中点击我们的应用,打开对应系统,但是界面不做跳转,在当前页面打开,并且浏览器地址栏只显示IP+应用名,不让显示o ...

  4. ubuntu 16.04 安装teamviewer

    很多人可能会问,为什么要在ubuntu上安装teamview?shell不就够用了吗?但实际上,很多时候,在远程连接linux的时候,我们需要在图形用户界面上进行操作.现在我就遇到了一个实际的问题:每 ...

  5. js session失效退出iframe

    // 代码加入登陆页面中 if( window.top != window.self ){ window.top.location = window.location.href; }

  6. MySQL Shared and Exclusive Locks

    官方文档 InnoDB implements standard row-level locking where there are two types of locks, shared (S) loc ...

  7. win10专业版激活步骤

    1.右键开始图标,选择[windows powershell(管理员)],或者命令提示符管理员: 2.打开命令窗口,复制这个命令slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T ...

  8. Win732位DotNetCore部署IIS错误记录

    部署环境为:Win7专业版32位,数据库Mysql5.7.27-win32 1.先启用IIS功能 2.安装Mysql5.7.27-win32,使用解压版安装 安装步骤: mysql的解压根目录下新建m ...

  9. tracking.js实现前端人脸识别

    1.下载https://trackingjs.com/ 2.运行例子 纳总一下 发现效果 里面的代码为 <!doctype html><html><head> &l ...

  10. vs2015下C4819该文件包含不能在当前代码页(936)中表示的字符问题解决

    今天编译IfcOpenshell出现很多warning如下: C4819 该文件包含不能在当前代码页(936)中表示的字符.请将该文件保存为 Unicode 格式以防止数据丢失 解决方案: 文件——& ...