<!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. Function ereg() is deprecated in

    PHP 5.3 ereg() 无法正常使用,提示"Function ereg() is deprecated Error".问题根源是php中有两种正则表示方法,一个是posix, ...

  2. Coder（线段树）

    求一部分和的线段树,因为是对5取余,所以给定一段区间a-b,假设其位置会有变化,最多会有5种和,那么就可以保留这五种和,在用lz进行延迟标记时,保存位置变化了多少也就知道了该从当前和转到哪一个和. 当 ...

  3. java 并发容器一之ConcurrentHashMap(基于JDK1.8)

    上一篇文章简单的写了一下,BoundedConcurrentHashMap,觉得https://www.cnblogs.com/qiaoyutao/p/10903813.html用的并不多:今天着重写 ...

  4. apache关联php

    LoadModule php5_module "D:/softs/php/php5apache2_2.dll" AddType application/x-httpd-php .p ...

  5. 【NumPy学习指南】day4 多维数组的切片和索引

    ndarray支持在多维数组上的切片操作.为了方便起见,我们可以用一个省略号(...)来 表示遍历剩下的维度. (1) 举例来说,我们先用arange函数创建一个数组并改变其维度,使之变成一个三维数组 ...

  6. Azure 项目构建 - 用 Azure 认知服务在微信公众号上搭建智能会务系统

    通过完整流程详细介绍了如何在Azure平台上快速搭建基于微信公众号的智慧云会务管理系统. 此系列的全部课程 https://school.azure.cn/curriculums/11 立即访问htt ...

  7. Could not load OpenSSL解决

    问题 Could not load OpenSSL. You must recompile Ruby with OpenSSL support or change the sources in you ...

  8. mvc的model验证，ajaxhelper，验证机制语法

    ajaxhelper: onsuccess是调用成功后显示方法,还有一个方法是调用前显示 model验证: 控件前端验证: 需要引入的JS 其中第二个是ajaxhelper的必须验证 后台的两个同名不 ...

  9. HDU 4341 Gold miner （分组背包）

    先把线按照距离原点的距离排序,然后用叉积把在同一条直线上的点放在一起, 把在同一条线上的点中的前i个点当成一个点就转化成了分组背包. 写if(kas++) putchar('\n') 居然PE了,PE ...

  10. vue2.0动画

    相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...