1. <!-- 垂直居中一定要有确定大小的 父容器(根) html,body 一般100% -->
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <title>index</title>
  9.     <style>
  10.         html,
  11.         body {
  12.             width: 100%;
  13.             height: 100%;
  14.             margin: 0;
  15.             padding: 0;
  16.         }
  17.  
  18.         body {
  19.             display: flex;
  20.             /*定义body的元素垂直居中*/
  21.             align-items: center;
  22.             /*定义body的里的元素水平居中*/
  23.             justify-content: center;
  24.         }
  25.  
  26.         .content {
  27.             width: 300px;
  28.             height: 300px;
  29.             background: orange;
  30.         }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.     <div class="content"></div>
  36. </body>
  37.  
  38. </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. CSS 盒子模型属性

    盒子模型(Flexible Box) 属性 属性 说明 CSS box-align 指定如何对齐一个框的子元素 3 box-direction 指定在哪个方向,显示一个框的子元素 3 box-flex ...

  2. 传奇服务端添加双倍经验卷的方法 双倍经验卷轴DB示例展示

    第一步我们在DBC数据库中添加好双倍经验卷轴DB,以下是现成的双倍经验卷DB,导入到DB里面就可以了. 222;双倍经验卷;31;0;1;20;0;0;265;0;0;0;0;0;0;0;0;0;0; ...

  3. 解决Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod的问题

    npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

  4. SpringCloud 设置多个运行实例的端口号

    使用SpringCloud做集群,开发.测试阶段,经常要运行一个模块的多个实例,要修改端口号. 有3种方式. 方式一:配置文件 server.port=9001 方式二.修改引导类,控制台输入参数值 ...

  5. 国内某Python大神自创完整版，系统性学习Python

    很多小伙伴纠结于这个一百天的时间,我觉得完全没有必要,也违背了我最初放这个大纲上来的初衷,我是觉得这个学习大纲还不错,自学按照这个来也能相对系统的学习知识,而不是零散细碎的知识最后无法整合,每个人的基 ...

  6. bugku 多种方法解决

    首先打开链接发现是一个exe文件 实在是想不出办法了 只能回去看提示 说会有一张图片 不知道怎么就打开了hxd 然后拖进去 发现了一串 用图片base64加密的码 然后在网页中找到 解码 工具 htt ...

  7. NUMPY的学习之路（2）——索引，合并，分割，赋值

    一.索引 1.1numpy数组的转置 A=np.arange(3,15).reshape(3,4) print(A) print(A[2][0]) print(A[2,1]) print(A[2,:] ...

  8. layui+ajax+select

    1.看效果 2.前端代码 <div class="layui-form-item"> <label class="layui-form-label&qu ...

  9. Azure IoT Hub 十分钟入门系列 （2）- 使用模拟设备发送设备到云(d2c)的消息

    本文主要分享一个案例: 10分钟- 使用Python 示例代码和SDK向IoT Hub 发送遥测消息 本文主要有如下内容: 了解C2D/D2C消息: 了解IoT Hub中Device的概念 了解并下载 ...

  10. 深入delphi编程理解之消息（六）无窗口单元消息的创建、接受及dispatch模式编程

    一.程序界面 二.程序代码 (一).主界面代码 //========================================================================== ...