代码:

<!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. .Net Core NOPI操作word（二） 表格操作

    一.创建表格操作 private void btnExport_Click(object sender, EventArgs e) { var dbcontext = new BlogModel(); ...

  2. shell整数与小数比较，小数之间比较的方法【转】

    在shell脚本中,无法对浮点数进行比较,如: max=0.1 min=0.01 if [ "$max" -gt "$min" ] then echo &quo ...

  3. redis创建集群至少需要几个节点？至少需要几个master节点？

    描述: 这也算个思考吧,通过redis-trib.rb可创建redis集群,然后通过--replicas后面接的数字,表示1个主节点对应几个从节点,那么我就做了如下的测试,想要达到的效果就是有6个节点 ...

  4. win10 搜索栏输入后长期没反应

    博客转载自:https://blog.csdn.net/qq_40875146/article/details/81742533 Get-AppXPackage -Name Microsoft.Win ...

  5. 【翻译】Flink Table Api & SQL — Hive —— Hive 函数

    本文翻译自官网:Hive Functions  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/hive/h ...

  6. TCP报文结构

    来自:https://blog.csdn.net/qq_32998153/article/details/79680704

  7. CKA认证考试题

    1.列出环境中所有的pv,并以name字段排序(使用kubectl自带排序功能) kubectl get pv --sort-by=.metadata.name 2.列出制定pod的日志中状态为err ...

  8. jmeter—建立测试计划

    一个测试计划描述了一系列 Jmeter 运行时要执行的步骤.一个完整的测试计划包含 一个或者多个线程组,逻 辑控制,取样发生控制,监听器,定时器,断言和配置元件. 一． 建立测试计划 在这一部分,你将 ...

  9. mysql 更新与查询（排序 分组 链接查询）

    UPDATE更新 #每一次数据的更新都需要update UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table_name SET field1=new-valu ...

  10. python的mysql数据库操作

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...