<!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. const成员函数

    尽管函数名和参数列表都相同,void foo( ) const成员函数是可以与void foo( )并存的,可以形成重载! 我们假设调用语句为obj.foo(),如果obj为non-const对象,则 ...

  2. FGPA 双向 IO 自动方向控制

    Using a Virtex Device to Drive 5V CMOS-Level Signals Voltage Level-Shifter Output Waveform

  3. Lucene 4.X 倒排索引原理与实现: (3) Term Dictionary和Index文件 (FST详细解析)

    我们来看最复杂的部分,就是Term Dictionary和Term Index文件,Term Dictionary文件的后缀名为tim,Term Index文件的后缀名是tip,格式如图所示. Ter ...

  4. python coroutine测试

    目的:实现一个类似于asyn await的用法,来方便的编写callback相关函数 from __future__ import print_functionimport timeimport th ...

  5. 更多文章请访问"程序旅途”

    更多文章请访问我的个人独立博客 程序旅途

  6. C++ 代码换行

    1.字符串太长,换行显示,怎么办?2.使用反斜杠,如下: string str = "abcd\ 1234"; 注意:反斜杠后面不准有任何字符.下一行开头的制表符不包含在整个字符串 ...

  7. Activity intent经常使用的 FLAG

    Intent.FLAG_ACTIVITY_NEW_TASK 默认的跳转类型,会重新创建一个新的Activity,不过与这种情况,比方说Task1中有A,B,C三个Activity,此时在C中启动D的话 ...

  8. 送给大家一个安卓版的easyradius短信提示客户端

    好像木有写博客了,送大家小软件,后期会适当更新 主要是方便一些用手机给用户发送到期短信的用户 下载地址: http://www.yss58.com/yss58

  9. 【网络编程】——connect函数遇见EINTR的处理

    最近在公司项目中突然报错如下 “connect: Interrupted system call”, 经过查找代码发现是在创建 socket 中执行了 connect 函数失败导致.上网查阅资料发现这 ...

  10. c# -- 对象销毁和垃圾回收

    有些对象需要显示地销毁代码来释放资源,比如打开的文件资源,锁,操作系统句柄和非托管对象.在.NET中,这就是所谓的对象销毁,它通过IDisposal接口来实现.不再使用的对象所占用的内存管理,必须在某 ...