代码:

<!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. ip rule实现源IP路由，实现一个主机多IP（或多网段）同时通(外部看是完全两个独立IP)

    利用ip rule实现基于源地址区分路由表,实现一个主机多IP网段同时通.(外部的一个主机无论访问哪个网段都可以访问通)实际应用:创建路由表table200ip route add 192.168.1 ...

  2. mysql实现row_number()和row_number() over(partition by)

    row_number() ) r, test_table t 解释:给test_table里的数据设置行号, rn是行号 row_number() over(partition by) ,@rank: ...

  3. 【Python】解析Python中函数的基本使用

    1.简介 在Python中定义函数的基本格式为: def <函数名>(参数列表): <函数语句> return <返回值> Python中的函数形式比较灵活,声明一 ...

  4. Kafka的安装与使用(转)

    9.1 Kafka 基础知识 9.1.1 消息系统 点对点消息系统:生产者发送一条消息到queue,一个queue可以有很多消费者,但是一个消息只能被一个消费者接受,当没有消费者可用时,这个消息会被保 ...

  5. django入门6引入验证码插件 django-simple-captcha

    Django的验证码插件 https://github.com/mbi/django-simple-captcha 安装 (mxonline) C:\Users\ws>pip install  ...

  6. elasticsearch 搜索提示DSL

    1,创建mapping: PUT /news_website { "mappings": { "news" : { "properties" ...

  7. LeetCode_475. Heaters

    475. Heaters Easy Winter is coming! Your first job during the contest is to design a standard heater ...

  8. 仿简书MarkDown编辑器可同步滚动

    模仿简书的MarkDown编辑器,使用Angular8写的示例 1.支持同步滚动 编辑的过程中,右侧预览界面会同步滚动.滚动右侧预览界面,左侧编辑区也会同步滚动哦 2.支持语法高亮 如下: using ...

  9. Unable to create application 异常

      这个错误是空指针,但你怎么去找就是找不到为什么会空指针 这时,你要去检查Application 中是否有重写的方法例如这个 @Override protected void attachBaseC ...

  10. java 正则 replace 忽略大小写

    String description = model.getDescription(); if (!"".equals(description)) { //replace(/\&l ...