整个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/ ...
随机推荐
- MySQL学习（五）事务隔离
文章部分图片和总结来自参考资料,侵删 概述 MySQL的可重复读隔离级别,事务T启动的时候会创建一个视图read-view,之后事务T执行期间,即使有其他事务修改了数据,事务T看到的仍然跟在启动时看到 ...
- 安装apache ActiveMQ
笔者环境 操作系统centos 6.9 java jdk 1.8 activemq版本 5.15.9 a)安装activemq需要jdk 环境,这里使用的是 jdk 1.8 yum安装jdk比较简单, ...
- 每天进步一点点------Allegro 原理图到PCB网表导入
- Linux上查看当前系统各内存分区信息
命令 ulimit -a -a 查看所有信息,同理,也可以例如 ulimit -s 只查看栈占内存信息
- codeforces div2 603 C. Everyone is a Winner!(二分)
题目链接:https://codeforces.com/contest/1263/problem/C 题意:给你一个数字n,求n/k有多少个不同的数 思路:首先K大于n时,n/k是0.然后k取值在1到 ...
- hadoop SecondNamenode详解
SecondNamenode名字看起来很象是对第二个Namenode,要么与Namenode一样同时对外提供服务,要么相当于Namenode的HA. 真正的了解了SecondNamenode以后,才发 ...
- 思科ACS的性能总结
ACS Performance & Scale 思科ACS目前还能支持的可能就是ACS5.8版本了,该版本也将于2020年停止支持,关于ACS信息会逐步退出大家的视野.该文档是Cisco论坛t ...
- Java - Java 命令行简介: 选项, 属性, 参数
概述 简单介绍一下 java 命令行相关的参数及属性 1. java 命令行 基本 命令 > java <mainClass> 描述 执行 Java 类 需要准备好编译完成的 mai ...
- 【资源分享】Half-Life（半条命）中英版
*----------------------------------------------[下载区]----------------------------------------------* ...
- HTML5学习（7）多媒体元素
视频元素video <video src="./media/xxx.mp4" controls autoplay muted loop></video> 音 ...