<!-- 垂直居中一定要有确定大小的 父容器(根) 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 块垂直居中的更多相关文章

  1. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  2. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

  3. PHP控制div块大小和颜色的例子

    网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...

  4. 采用CSS3的动态元素（动画）设计div块的层级式展现

    此练习作品是为学习HTML5+CSS3而设计的(如有不好请大家批评指教~~~). 操作:当页面加载时,点击网页中的绿色块(一层),则有其他几块(二层)从其中央出现并向外延伸并旋转,点击这几块中任意一个 ...

  5. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  6. 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/ ...

  7. 使用 margin 让div块内容居中

    问:有一个div块,其width为300px,如何设置margin让div块居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为 自动 ...

  8. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  9. css实现div块半透明

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. DB技能数据库里把技能伤害调整

    1. MagID 技能代号 2. MagName 技能名称 3. Effect Type 效果类型(使用技能时角色的动作效果) 4. Effect 效果(技能产生的动画效果) 5. Spell 每次耗 ...

  2. P2141珠心算测验题解

    先来看一下题目:某学校的珠心算老师采用一种快速考察珠心算加法能力的测验方法.他随机生成一个正整数集合,集合中的数各不相同,然后要求学生回答:其中有多少个数,恰好等于集合中另外两个(不同的)数之和? 这 ...

  3. fiddler中文乱码解决方案

    只用添加一个注册表变量就行 cmd窗口执行regedit命令,在弹出的注册表编辑界面找到fiddler 右击新建一个字符传值 HeaderEncodingGBK 结果如上图右所示~ 重启fiddler ...

  4. Redis读写分离的简单配置

    Master进行写操作,可能只需要一台Master.进行写操作,关闭数据持久化. Slave进行读操作,可能需要多台Slave.进行读操作,打开数据持久化. 假设初始配置有Master服务器为A,sl ...

  5. truffle编译合约常见问题及其在私链上的部署与交互

    一.初始化truffle项目 truffle init //初始化truffle项目文件夹 将写好的合约文件放到contract文件夹中 truffle  compile  //编译合约 (注意!! ...

  6. Windows server 2012文件服务器配置

    文件服务器的管理   Windows server 2012提供了易于使用的管理工具,让系统管理员更有效的管理服务器的资源. 安装文件服务器管理工具 添加角色-安装管理器 安装完成后直接可以在工具中打 ...

  7. java到js的中文无法显示，中文显示位(?)

    今天遇到这么一个问题,用js调用java的get请求,得到的json数据中中文无法正常显示,jsp文件中都是申明utf-8格式的,查询了一番,发现问题出现在@ResponseBody上 @Respon ...

  8. 吴裕雄 python 机器学习——多项式贝叶斯分类器MultinomialNB模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,naive_bayes from skl ...

  9. 测试工具 - IDEA - IDEA Code Coverage

    概述 使用 idea 自带的 code coverage 工具 背景 了解 白盒测试用例设计 和 测试覆盖率 之后, 大概就需要 实践 了 实践的话, 还是需要 工具 来检验效果 工具选取 选项 Ja ...

  10. 小白科普：Netty有什么用？

    随着移动互联网的爆发性增长,小明公司的电子商务系统访问量越来越大,由于现有系统是个单体的巨型应用,已经无法满足海量的并发请求,拆分势在必行. 在微服务的大潮之中, 架构师小明把系统拆分成了多个服务,根 ...