<!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. H5存储

    1.localstorage ① 500万字符限制② 一般存储ajax请求返回数据,并且需要设置过期时间③ 具有清理机制,将过期数据清理④ 不存储敏感信息⑤ 不存储SEO依赖数据,至少不能严重依赖⑥ ...

  2. JsonConvert对象实现json与对象之间的转换

    自己下载Newtonsoft.Json文件 使用JsonConvert对象转换 1. 2.添加引用到项目中,然后导入命名空间 3.就可以使用JsonConvert对象实现Json与类型之间的转换

  3. React Native开发时devices offline和手机不能晃动的处理

    1. adb device 显示 devices offline 可能重启adb server: $ adb kill-server $ adb start-server 2. 华为等手机不能 晃动显 ...

  4. React 实践记录 02 Flux introduction

    Introduction 本文组成: React 官方文档翻译 相关实践心得. 内容上是Flux的介绍,例子将会在以后写出. 一旦稍微多了解一点React,很难避免听到Flux这个名词. Flux是一 ...

  5. 一文带你读懂 Mysql 和 InnoDB存储引擎

    作为一名开发人员,在日常的工作中会难以避免地接触到数据库,无论是基于文件的 sqlite 还是工程上使用非常广泛的 MySQL.PostgreSQL,但是一直以来也没有对数据库有一个非常清晰并且成体系 ...

  6. Mysql order by 多字段排序

    mysql单个字段降序排序: select * from table order by id desc; mysql单个字段升序排序: select * from table order by id ...

  7. jquery select取option的value值发生变化事件

    html代码如下所示: <div id = "schedule"> <label>是否设置:</label> <select name=& ...

  8. jmeter中通过命令方式生成结果文件

    通过命令的方式将jmeter生成的jtl结果文件生成html文件,以便更直观的分析结果数据,以下命令可以放在1个bat文件中取执行. bat文件可以放到jmeter的根目录下. 步骤1: 通过命令方式 ...

  9. 在eclipse中查看你用的tomcat的路径

    在eclipse中查看你用的tomcat的路径   打开eclipse,选择window->Preferences->Server->Runtime Environments选择你的 ...

  10. 最新深度ghost win7系统下载

    深度技术ghost win7系统 64位快速安装版 V2016年2月,深度技术ghost win7 64位快速安装版在不影响大多数软件和硬件运行的前提下,已经尽可能关闭非必要服务,自动安装AMD/In ...