整个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/ ...
随机推荐
- sublime添加自己的编译环境_添加一个.app或者.exe文件执行脚本
如何添加一个.app或者.exe文件执行脚本 看了很多简书和博客,还是搞不好,最后参考官方文档搞定了: http://www.sublimetext.com/docs/3/build_systems. ...
- input file弹出框选择文件后缀限制
在页面选择文件时的弹出框默认显示的是所有类型的文件,有时候文件太多不好选择,我们就要过滤掉不想展示的文件,这是需要用到input的accept属性,只有在type="file"才有 ...
- css动画效果之transition（动画过渡效果属性）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二十六篇 玩转数据结构——二分搜索树（Binary Search Tree）
1.. 二叉树 跟链表一样,二叉树也是一种动态数据结构,即,不需要在创建时指定大小. 跟链表不同的是,二叉树中的每个节点,除了要存放元素e,它还有两个指向其它节点的引用,分别用Node l ...
- casperJs的安装2
通过上面一节,以为能够顺利安装好phantom 没想到,根本没成功. 接着,通过github上下载项目,重新安装: 1.clone项目:[https://github.com/ariya/phanto ...
- linux下安装keepalived
keepalived安装文档 1. 安装环境 su - root yum -y install kernel-devel* yum -y install openssl-* yum -y instal ...
- bootstrap的网格控制
<div class="container-fluid row m-0 p-0"> <div class="col-2 border"> ...
- 吴裕雄 python 机器学习——集成学习随机森林RandomForestRegressor回归模型
import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,ensemble from sklear ...
- django-cors-headers
django-cors-headers介绍 一个Django应用程序,向响应头中添加跨域资源共享(CORS)头.这允许从其他来源向Django应用程序发出浏览器内请求,当然也可以自定义中间件然后添加响 ...
- redis 基础操作教程
1.linux 安装redis : Linux 下安装 下载地址:http://redis.io/download,下载最新稳定版本. 本教程使用的最新文档版本为 2.8.17,下载并安装: $ wg ...