<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

<style>
            html, body {
                height: 100%;
            }

body {
                margin: 0;
                padding: 0;
                width: 100%;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

.container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

.content {
                text-align: center;
                display: inline-block;
            }

.title {
                font-size: 96px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">Laravel 5</div>
                <div style="width:500px; height:200px; background:red">测试</div>
            </div>
        </div>
    </body>
</html>

css实现高度不固定的div元素模块在页面中水平垂直居中的更多相关文章

  1. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  3. CSS 实现：元素相对于文档水平垂直居中

    [要求]:如何用 CSS 实现水平/垂直居中一个元素(相对于文档) <body> <div class="content"></div> < ...

  4. 设置DIV块元素在浏览器页面中垂直居中

    任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 ...

  5. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  6. 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟

    思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...

  7. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  8. css实现定高的元素在不定高的容器中水平垂直居中（兼容IE8及以上）

    容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...

  9. css如何让子元素在父元素中水平垂直居中

    方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. Cocos2dx.3x入门三部曲-Hello Game项目解析(三)

    一.前提: 完成Hello Game项目的创建编译. 具体参考:Cocos2dx.3x_Hello Game项目创建篇 二.本篇目标: l  分析proj.win32工程的主要构成 l  分析proj ...

  2. 在IE7下使用angularjs(转)

    在我的环境中,主要支持的浏览器为:ie7, ie8, ie9, chrome等.在试验angularjs时,发现在ie7环境下运行有问题,于是在网上搜了一下相关的内容,说HTML标签的写法要这样: & ...

  3. 编译Ngnix遇到的问题,查看程序依赖的库文件

    要点:ldd 可以读取每个可以运行的程序依赖的 so 文件. 编译的时候提示需要Openssl库. 查看本机,已经安装了openssl 查看编译报错文件,查找Openssl所依赖的库 more obj ...

  4. 用CSS box-shadow画画

    原理:找一幅画,每隔5 pixel取一个点的RGB,在CSS中用box-shadow描绘出这个点 Python from PIL import Image if __name__ == '__main ...

  5. JAVA自已设计JSON解析器

    当然,有很多很好的JSON解析的JAR包,比如JSONOBJECT,GSON,甚至也有为我们测试人员而打造的JSONPATH,但我还是自已实现了一下(之前也实现过,现在属于重构). 思想是这样的,以这 ...

  6. HTTP 错误 500.21 - Internal Server Error 处理程序“ExtensionlessUrlHandler-ISAPI-4.0_64bit”在其模块列表中有一个错误模块“IsapiModule” 解决方法

    IIS在发布网站后找不到首页,提示以上错误,原因是在“应用程序池”中,把对应的网站的“托管管道模式”设置为“集成”即可.

  7. Scala 深入浅出实战经典 第79讲：单例深入讲解及单例背后的链式表达式

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  8. Android Multiple Screens Android 屏幕适配的一些总结

    作为一名Android应用开发程序猿,最痛苦的事莫过于在屏幕适配了,这与历史原因有关,具体就不深究了. 直到最近才搞明白dpi是怎么换算的,在开发的过程中,一个应用运行的屏幕标准应该是分辨率为320x ...

  9. VS替换空行

    visual studio2012 改变了正则表达式的写法 因此原来的不管用了 Old: ^:b*$\n New: ^(?([^\r\n])\s)*\r?$\r?\n Click Ctrl-H (qu ...

  10. openssl命令行工具简介 - RSA操作

    原文链接: http://www.cnblogs.com/aLittleBitCool/archive/2011/09/22/2185418.html 首先介绍下命令台下openssl工具的简单使用: ...