<!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. python flask学习(3)

    这次主要学习web表单.学了下,很像是Django的form表单验证.不过有许多的不同.可以说是功能更加碎块化.Django的验证方式是很固定和严谨的,风格完全不同. 尽管Flask的请求对象提供的对 ...

  2. 终端工具Xmanager使用技巧

    1. 新建绘画使用终端连接服务器 2. 设置终端类型和编码 3. 设置终端外观,包括字体颜色等等 4. 设置默认上传路径和下载路径

  3. iOS 字符串处理笔记

    iOS字符串处理笔记,包括如何使用正则表达式解析,NSScanner扫描,设置和使用CoreParse解析器来解析处理自定义符号等内容 搜索 在一个字符串中搜索子字符串 最灵活的方法 - (NSRan ...

  4. Spring MVC异常统一处理（包括普通请求异常以及ajax请求异常）

    通常SpringMVC对异常的配置都是返回某个jsp视图给用户,但是通过ajax方式发起请求,即使发生异常,前台也无法获得任何异常提示信息.因此需要对异常进行统一的处理,对于普通请求以及ajax请求的 ...

  5. 洛谷 P1774 最接近神的人_NOI导刊2010提高（02）

    题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...

  6. 使用python模拟cookie登陆wooyun

    import urllib2 class SimpleCookieHandler(urllib2.BaseHandler): def http_request(self, req): simple_c ...

  7. sparkmlib-相关系数

    一.基本原理 在stat包中实现了皮尔逊(Pearson)与 斯皮尔曼(Spearman)两类相关系数的计算 (1)Pearson:   (x,y)协方差/[(x标准方差)*(y标准方差)] 详情可以 ...

  8. 爬虫_python3_urllib

    urlib库为python3的HTTP内置请求库 urilib的四个模块: urllib.request:用于获取网页的响应内容 urllib.error:异常处理模块,用于处理异常的模块 urlli ...

  9. Velocity模板语法说明

    Velocity基本语法 "#"用来标识Velocity的关键字,包括#set.#if .#else.#end.#foreach.#end.#include.#parse.#mac ...

  10. [BZOJ2938]病毒 （AC自动机+dfs）

    题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...