小div在大div中垂直居中方式
代码:
<!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中垂直居中方式的更多相关文章
- Day_09【常用API】扩展案例2_测试小字符串在大字符串中出现的次数
分析以下需求,并用代码实现 1.键盘录入一个大字符串,再录入一个小字符串 2.统计小字符串在大字符串中出现的次数 3.代码运行打印格式: 请输入大字符串: woaiheima,heimabutongy ...
- 小div在大div中垂直居中，以及div在页面垂直居中
<html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...
- 小 div在大 div中左右上下居中
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...
- 小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
- 小div在大div里面 垂直居中
方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...
- span(行级元素)在不定高的div(块级元素)中垂直居中的方法
设置父级元素: align-items: center; display: flex;
- java 11-8 在大串中查找小串的案例
1.统计大串中小串出现的次数 举例: 在字符串"woaijavawozhenaijavawozhendeaijavawozhendehenaijavaxinbuxinwoaijavagun& ...
- html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...
- 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 ...
随机推荐
- Android相关视频
Android架构师 层次分析 –从顶层到底层 洞察其原理https://www.bilibili.com/video/av59066641?t=132安卓/Android 逆向破解系统班 第2期 全 ...
- 使用visual studio code运行html
可以安装插件:open in browser 安装好插件后,编辑html网页的时候,右键多了两个菜单: 1.Open in Default Browser 2.Open in Other Browse ...
- mac下使用java测试iOS推送
首先mac下有很多现在的测试iOS推送软件,为什么要用java程序测试呢: 因为大多数后台推送服务可能是JAVA开发的,那么为了验证我们在MAC上导出的推送证书文件是否正确: 制作开发证书的iOS开发 ...
- java上传图片并压缩图片大小
Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...
- Python3基础 tuple 使用通配符*进行拆包 简单示例
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- ODAC Developer Downloads - Oracle Universal Installer
https://www.baidu.com/link?url=BL2vRNMWap6AFJcmsFCEKi3KxZ2SgmtVJoihVKhF-SPgzvJHNkbk_j7nz1HdtAAWZ22NM ...
- EF Core使用遇到的问题
目录 EF Core速度问题 问题描述 EF使用方法1,每一行存储一次(400条/s) EF使用方法2,链接不释放 (40条/s) EF使用方法3,多次add,一次SaveChanges(400条/s ...
- 在 Hibernate 中inverse的属性
hibernate配置文件中有这么一个属性inverse,它是用来指定关联的控制方的.inverse属性默认是false,若为false,则关联由自己控制,若为true,则关联由对方控制.见例子: 一 ...
- FinalShell—一体化服务器管理软件（SSH客户端）
下面附上一些截图和官方连接: 官网:http://www.hostbuf.com/ FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发 ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...