整个DIV 块垂直居中
<!-- 垂直居中一定要有确定大小的 父容器(根) html,body 一般100% --> <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
} body {
display: flex;
/*定义body的元素垂直居中*/
align-items: center;
/*定义body的里的元素水平居中*/
justify-content: center;
} .content {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head> <body>
<div class="content"></div>
</body> </html>
整个DIV 块垂直居中的更多相关文章
- DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
- Banner中利用Jquery隐藏显示下方DIV块
实现方式1: <!DOCTYPE html><html><head> <meta charset="UTF-8"> &l ...
- PHP控制div块大小和颜色的例子
网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...
- 采用CSS3的动态元素（动画）设计div块的层级式展现
此练习作品是为学习HTML5+CSS3而设计的(如有不好请大家批评指教~~~). 操作:当页面加载时,点击网页中的绿色块(一层),则有其他几块(二层)从其中央出现并向外延伸并旋转,点击这几块中任意一个 ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明
css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...
- 使用 margin 让div块内容居中
问:有一个div块,其width为300px,如何设置margin让div块居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为 自动 ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- css实现div块半透明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- java_爬虫_获取经过js渲染后的网页源码
md 弄了一天了……(这个月不会在摸爬虫了,浪费生命) 进入正题: 起初是想写一个爬虫来爬一个网站的视频,但是怎么爬取都爬取不到,分析了下源代码之后,发现源代码中并没有视频的dom 但是在浏览器检查元 ...
- Django_视图
1. 视图 1.1 返回json数据 2. url配置 url组成 3. 获取 url参数 别名 4. url反向解析 接收参数 reverse 5. 视图总结 5.1 自定义错误页面 6. Http ...
- 每天进步一点点------Allegro 群组布线
执行Route->connect命令,设置好控制面板中的内容.然后设置同时走线的GROUP包含哪些网络,有两种方法.第一种方法,如果几个网络是紧邻的,可以直接框选,选中的网络就会被包含在GROU ...
- linux deploy---旧手机变废为宝
前几天朋友送了我一部红米Note 1s,本来不想要,转念一想,不要白不要,就收了. 拿到之后我就想,这么一个1+8的手机能做什么呢? 翻遍了CSDN和简书,找到了一个性价比不错的方法:给旧手机装上一个 ...
- 爬虫(十一)：selenium爬虫
1. selenium基础 selenium部分可以去看我写的selenium基础部分,由于链接太多了这里就不发出来了. 代理ip: 有时候频繁爬取一些网页.服务器发现你是爬虫后会封掉你的ip地址.这 ...
- 计算几何-UVa10652
This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 题意见白书,P2 ...
- [消灭虫子] Qt 套接字发不出去东西
最近状态不是太好,导致出现bug之后心烦意乱的 遇到这样的事情,就是在 这样的函数执行之后服务端收不到任何消息,但是在调试台显示已经发送了正常的字节数. 表示大概已经发出去了,但是我确定服务端没有问题 ...
- 吴裕雄 python 机器学习——集成学习随机森林RandomForestClassifier分类模型
import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,ensemble from sklear ...
- Reinforcement Learning Algorithm 资源
算法源码: https://github.com/ljpzzz/machinelearning https://github.com/imraviagrawal/Reinforcement-Learn ...
- Git - 06. git checkout
1. 概述 已经学会查看 提交记录 尝试在 提交记录 之间做跳转 2. 命令 跳转到提交 概述 跳转到 日志 里的某次提交 命令 # 撤销 工作区的所有改动, 返回 当前分支 的 上一个提交 > ...