<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>无标题文档</title>

    <style type="text/css">

        .vertical-container {

            height: 500px;

            display: -webkit-flex;

            display:flex;

            -webkit-align-items: center;

            align-items: center;

            -webkit-justify-content: center;

            justify-content: center;

            border:solid 1px red;

        }

    </style>

</head>

<body>

    <div class="vertical-container">

        <div>CSS里总算是有了一种简单的垂直居中布局的方法了！</div>

    </div>

</body>

</html>

CSS里总算是有了一种简单的垂直居中布局的方法了的更多相关文章

  1. 一种简单快速的模板解析方法，活用with javascript版

    //一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...

  2. 【Java基础】几种简单的调用关系与方法

    直接上代码吧. class lesson4AB //同一个类下的public修饰的方法A,B可以相互调用 { public void A() { B();//等价于this.B(); } public ...

  3. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

  4. CSS里的 no-repeat 是什么意思

    CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复 ...

  5. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  6. css布局 - 垂直居中布局的一百种实现方式（更新中...）

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

  7. CSS里的 no-repeat

    简单来说,CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平 ...

  8. 为什么我在css里使用功能类优先

    前言 我想在我们开始的学CSS语法的时候,都是从以下的流程开始的: 1.写一个CSS类选择器: .my-class { } 2.往选择器里填充CSS语法: .my-class { display fl ...

  9. CSS里的pointer-events属性

    现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...

随机推荐

  1. 上白泽慧音——tarjian

    题目描述 在幻想乡,上白泽慧音是以知识渊博闻名的老师.春雪异变导致人间之里的很多道路都被大雪堵塞,使有的学生不能顺利地到达慧音所在的村庄.因此慧音决定换一个能够聚集最多人数的村庄作为新的教学地点.人间 ...

  2. MessageQueue消息队列的开启

    前言: MessageQueue消息队列形似一个保存消息的容器,发送方(例如服务程序)收集处理信息存储在队列中,接收方通过一定的协议取得队列中自己需要的信息,可以实现不同系统之间的通信: 但值得注意的 ...

  3. hihocoder1821 取卡片游戏

    思路: 博弈dp. 实现: #include <iostream> #include <algorithm> #include <cstring> using na ...

  4. 为网站设置icon图标用于显示在浏览器标签页最左侧

    icon图标,想必大家对它并不陌生吧,在浏览网页时会看到浏览器标签页的最左侧会有一个小图标,这个正是icon图标.本例为大家介绍下如何为网站设置这个图标 这句话起什么作用 ?复制代码 代码如下: &l ...

  5. vs和github同步开发步骤

    首先,这是在visual studio中使用.需要了解关于vs同步github必不可少.下载安装破解什么的先完成vs. 1. 然后安装一个vs中使用github的插件.vs自带的下载.这个是下载地址. ...

  6. 解决activeandroid no such table

    场景:activeandroid拷贝数据库 (1)复制sql数据库到项目的assets目录,例如/myapp/src/main/assets/prepop.db (2)确保manifest的AA_DB ...

  7. abp viewmodel的写法

    我的写法 public class QuotaCreateOrEditViewModel { public QuotaDto LoanQuota { get; set; } public bool I ...

  8. 1653: Champion of the Swordsmanship

    1653: Champion of the Swordsmanship Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 11  Solved: 8[Subm ...

  9. 量化投资，你需要了解的A股财务数据

    摘要:基本面量化是应用量化研究领域的重头戏,财务数据的整理和加工是基本面量化的第一步.本文梳理了财务数据的基本知识,包括报表类型.数据来源.调整更正和使用原则等,并给出了单季度和TTM数据的计算流程. ...

  10. python matplotlib 可视化操作实例

    具体代码: # encoding: utf-8 # coding = utf-8 import sys reload(sys) sys.setdefaultencoding('utf8') from ...