代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>div居中</title>
  6.   <style>
  7.        * {
  8.             margin:0;
  9.             padding:0;
  10.           }
  11.           .content {
  12.             width:400px;
  13.             height:400px;
  14.             background:orange;
  15.             border: 1px solid green;
  16.             position:relative;
  17.             margin: 100px auto;
  18.           }
  19.           .nav {
  20.             width:80px;
  21.             height:80px;
  22.             line-height:80px;
  23.             text-align:center;
  24.             background:green;
  25.             margin: auto;
  26.             position:absolute;
  27.             left: 0;
  28.             top: 0;
  29.             bottom:0;
  30.             right: 0;
  31.           }
  32.   </style>
  33. </head>
  34. <body>
  35.   <div class="content">
  36.          <div class="nav">这是内容</div>
  37.     </div>
  38. </body>
  39. </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. wx.request 请求与django

    wx.request 1.wx.request相当于ajax请求,和django后台进行交互 官方文档:https://developers.weixin.qq.com/miniprogram/dev ...

  2. c++优先队列(priority_queue)用法详解

    转自csdn的文章,仅作为学习笔记.原文链接:https://blog.csdn.net/weixin_36888577/article/details/79937886 普通的队列是一种先进先出的数 ...

  3. Error creating bean with name 'userRepository': Invocation of init method failed;

    2019-11-25 19:43:49.482 INFO 6528 --- [ main] c.g.c.y.core.impl.AbstractController : Controller has ...

  4. sql为什么要用where 1=1？

    这个1=1常用于应用程序根据用户选择项的不同拼凑where条件时用的.例如:查询用户的信息,where默认为1=1,这样用户即使不选择任何条件,sql查询也不会出错.如果用户选择了姓名,那么where ...

  5. Android之WebRTC介绍(二)

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

  6. videojs使用技巧

    1 初始化 Video.js初始化有两种方式. 1.1 标签方式 一种是在<video>标签里面加上class="video-js"和data-setup='{}'属性 ...

  7. 【转】京东金融App端链路服务端全链路压测策略

    京东金融移动端全链路压测历时三个月,测试和服务端同学经过无数日日夜夜,通宵达旦,终于完成了移动端链路的测试任务.整个测试有部分涉及到公司敏感数据,本文只对策略部分进行论述. 1.系统架构与策略 在聊性 ...

  8. SonarQube - 安装与运行SonarQube

    1 - 下载SonarQube SonarQube有多个版本,其中CE(Community Edition)版本免费开源,其余的开发者版本.企业版本和数据中心版本都是收费版本. 官网下载:https: ...

  9. ZYNQ 7020学习笔记之PL侧普通信号中断PS的实验

    1.参考 UG585 网络笔记 2.理论知识 见中断部分 3.实验目的 练习使用PL侧的普通信号来中断PS处理器. 4.实验过程 建立工程,设置并初始化串口中断,在运行程序之后,如果串口接收到N(1- ...

  10. 在ensp上配置基于接口地址池的DHCP

    原理 实验模拟 实验拓扑 相关参数 开启dhcp服务 开启接口的dhcp服务功能,指定从接口地址池分配(接口1一样) 配置接口DHCP服务租期(租期默认是一天) 设置保留地址 设置dns 我们在pc1 ...