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

    1.static成员函数不能定义为const的,这是因为static成员函数只是全局函数的一个形式上的封装,而且static成员函数不能访问类的非静态成员(没有this)指针,修改非静态数据成员又从何 ...

  2. windows下clang的安装与使用

    我本意是想在windows下学习下C++11,而结果是我的Visual Studio 2012不完全支持,而我又懒得去安装2013/2015,太大了.公司运维也不允许我去下载- -,然后就想能不能在w ...

  3. php加密解密功能类

    这两天突发奇想想要用php写一个对日常项目加密以及解密的功能,经过努力简单的封装了一个对php代码进行加密解密的类,一些思想也是来自于网络,初步测试用着还行,可以实现对指定项目的加密以及解密(只针对本 ...

  4. error while loading shared libraries: /usr/lib64/libc.so.6: invalid ELF header

    在安装一个程序的时候提示libc.so.6过旧,但是查看libc.so的版本是最新的,于是尝试使用尝试软链接  ln -s /usr/lib64/libc.so /usr/lib64/libc.so. ...

  5. AT&amp;T汇编语言——工具及程序组成

    1.开发工具 在汇编语言中,用到的工具主要用下面几个: 汇编器.连接器.调试器.编译器 由于我在这里的是AT&T汇编语言.所以工具下也都是gnu下的那些. 1.1 汇编器(as) 汇编器有非常 ...

  6. 常用js代码

    common-function-lib.js /*产生随机颜色*/ function randomColor() { var rand = Math.floor(Math.random() * 0xF ...

  7. Delphi 中 动态创建的Panel无法改变颜色的解决办法

    刚开始代码如下: procedure TForm1.Button1Click(Sender: TObject); var Panel: TPanel; begin Panel := TPanel.Cr ...

  8. 【原创】从零开始学SpagoBI5.X源码汉化编译

    从零开始学SpagoBI5.X源码汉化编译 一.新建Tomact Server 服务器并配置测试1.文件-新建-其他-过滤server-服务类型选择Tomact V7.0 Server2.根据需要修改 ...

  9. WWDC2016-session401-CodeSign大改版

    自动签名机制和手动签名都明显看起来很好用. 自动签名有log 手动签名有具体的错误提示信息. session401 Xcode Signing. 亲,你的眼睛好大 相声演员吗? Yeah,You ar ...

  10. PopupWindow错误:PopupWindow$1.onScrollChanged 出现 NullPointerException和PopupViewContainer.dispatchKeyEvent 出现 NullPointerException

    错误1: java.lang.NullPointerException at android.widget.PopupWindow$1.onScrollChanged(PopupWindow.java ...