代码:

<!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. Behavior Trees for Path Planning (Autonomous Driving)

    Behavior Trees for Path Planning (Autonomous Driving) 2019-11-13 08:16:52 Path planning in self-driv ...

  2. mapdb的适用场景介绍

    对于大部分系统来说,mapdb并无太大价值,而且增加了成本.但是如果一级缓存巨大例如数以十GB级别,或占据了整个JVM的1/2以上,mapdb的价值就会体现出来.正如其官网介绍: MapDB prov ...

  3. Token 安全登陆防止窃取

    HTTP 协议是无状态的 在web中使用cookie+session的技术来保持用户登陆的状态 移动端使用token来保持用户登陆状态由于token在网络中传输,很容易被 中间人获取,进而模拟用户进行 ...

  4. Android之WebRTC介绍(二)

    WebRTC提供了点对点之间的通信,但并不意味着WebRTC不需要服务器.暂且不说基于服务器的一些扩展业务,WebRTC至少有两件事必须要用到服务器: 1. 浏览器之间交换建立通信的元数据(信令)必须 ...

  5. Anaconda + PyCharm + Pytorch

    Anaconda 1.  下载Anaconda https://www.anaconda.com/download/ 2.  安装 3. 添加环境变量 Path - C:\Users\Godzilla ...

  6. Linux CentOS7 通过 yum 搭建 svn 服务器，并配置权限

    1,使用 yum 安装 svn 服务器 yum -y install subversion rpm -ql subversion -- 改命令可以查看 svn 的安装位置 2,创建仓库根目录,可任意选 ...

  7. 硬盘分区及Linux文件系统

    1. 硬盘物理结构 硬盘物理上主要分为: 盘片 磁道 扇区 机械臂 磁头 主轴 磁道: 当硬盘盘片旋转时,磁头若固定在一个位置上,则磁头会在盘片表面划出一个圆形轨迹,这些圆形轨迹就叫做磁道.以盘片中心 ...

  8. VC++ 学习笔记（六）：简单C++

    到现在,我觉得终于找到学习和使用C++的基本原则了——务必简单.将其看成一个带类的C,或者将其看做标准库下的C++. C++太复杂——其实这种复杂性,所有语言都有,只是多数语言都隐藏了这种复杂性,只有 ...

  9. Mysql操作命令（基础）

    创建数据库 CREATE DATABASE name; 显示所有数据库 SHOW DATABASES; 删除数据库 DROP DATABASE name; 选择数据库 USE DATABASENAME ...

  10. 开启和安装Kubernetes k8s 基于Docker For Windows

    0.最近发现,Docker For Windows Stable在Enable Kubernetes这个问题上是有Bug的,建议切换到Edge版本,并且采用下文AliyunContainerServi ...