<!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. 史上最强大的js图表库——ECharts带你入门(转)

    出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 Sta ...

  2. 【Android】Android 移动应用数据到SD

    [Android]Android 移动应用数据到SD 在应用的menifest文件中指定就可以了,在 <manifest> 元素中包含android:installLocation 属性, ...

  3. Docker实践(6)—CentOS7上部署Kubernetes

    Kubernetes架构 Kubernetes的整体架构如下: Master为主控节点,上面运行apiserver,scheduler,controller-manager等组件.Minion相当于工 ...

  4. Linux: Set OR Change The Library Path

    Linux: Set OR Change The Library Path by NIX CRAFT on APRIL 9, 2010 · 3 COMMENTS· LAST UPDATED AUGUS ...

  5. puppy-language

    puppy language是一种解释型的结构化脚本语言. 项目地址: https://github.com/zlvb/PuppyLanguage 因为一直很忙,有段时间没去更新了,不过功能已经比较完 ...

  6. netfilter分析

    转自:http://blog.sina.com.cn/s/blog_a31ff26901013n07.html 一.概述 1. Netfilter/IPTables框架简介 Netfilter/IPT ...

  7. 彻底解决Android SDK Manager更新慢的问题

    Android SDK 下载速度慢,解决方法大概有两种.第一,FQ.这种方法比较彻底,但是要想有稳定的效果还的要花大价钱.第二,有些高人直接给了SDK中各软件的下载地址,直接下载速度非常快,下载后将包 ...

  8. iOS CoreData技术学习资源汇总

    一.CoreData学习指引 1. 苹果官方:Core Data Programming Guide 什么是CoreData? 创建托管对象模型 初始化Core Data堆栈 提取对象 创建和修改自定 ...

  9. idea使用maven启动tomcat

    1.设置tomcat,如图: 2.添加war包 3.修改pom.xml 删除可能的选项,如果有下面的代码,删除掉 4.选择使用的resources目录 5.启动即可

  10. 使用Aspose.Cells 设置chart的y坐标轴显示值

    目的:设置chart的y坐标轴显示值 用aspose.cell生成的chart生成的Y轴是默认生成的,自己要定义y轴坐标值1.把数据源写到excel里面,list里面2.y轴坐标自己定义 第一种:默认 ...