body,div{margin:0px;padding:0px;}

.flex-container{display:flex;height:300px;background-color:#ddd;justify-content:center;align-items:center;}

.item{padding:6px;width:200px;height:200px;}

.item1{background-color:#372;}

.item2{background-color:#484;}
<div class="flex-container">

        <div class="item item1">item1</div>

        <div class="item item2">item2</div>

</div>
justify-content:定义项目在主轴上的对其方
align-items:定义项目在交叉轴上的对齐方式。

使用display:flex;实现垂直水平居中的更多相关文章

  1. CSS - flex 垂直水平居中

    display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */

  2. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  3. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  4. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  5. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  6. 纯CSS完美实现垂直水平居中的6种方式

    前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...

  7. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  8. 【css】图片垂直水平居中

    一.已知宽高的图片实现垂直水平居中 1.借助margin-top负边距实现垂直居中 <!DOCTYPE html> <html> <head> <meta c ...

  9. 【css】一行或者多行文字垂直水平居中

    1.方法一:使用css3弹性盒子(兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持) <!DOCTYPE html> <html> < ...

随机推荐

  1. 抓取猫眼电影top100的正则、bs4、pyquery、xpath实现方法

    import requests import re import json import time from bs4 import BeautifulSoup from pyquery import ...

  2. Python基础之简介

    参考原文 廖雪峰Python教程 什么是Python? Python是一种计算机程序设计语言,又被称为胶水语言,它是高级的编程语言. Python能干什么? 网站后端程序员.自动化运维.数据分析师.游 ...

  3. ListView常用属性 (2012-01-12 17:20:27)

    比较特别的属性,通过设置这样的属性可以做出更加美观的列表.stackFromBottom——设置该属性之后你最新条目就会显示你列表的最下面,值为true和false,如android:stackFro ...

  4. ie7下设置z-index无效如何解决？

    ie7下z-index无效的问题之前做练习的时候遇到过,百度解决掉之后就丢脑后了.今天项目中又发现这个bug,无奈又去百度,这次还是记下来,节省了百度的时间还能小装一把... 需求是这样的: 页面中的 ...

  5. 洛谷——P2007 魔方

    P2007 魔方 常神牛家的魔方都是3*3*3的三阶魔方,大家都见过. 模拟即可: #include<iostream> #include<cstdio> #include&l ...

  6. Linux：iscsi存储服务器配置

    服务器添加4块硬盘 mdadm -Cv /dev/md0 -n 3 -l 5 -x 1 /dev/sdb /dev/sdc /dev/sdd /dev/sde 记下UUID值 mdadm -D /de ...

  7. Network----轮询

    轮询: 定时每隔多长时间刷新一次,但是,7X24的对服务器的压力会过大,因为在夜间或者是流量低峰期时,他还要持续工作. 客户端发一次请求,服务器就要相应一次. 长轮询: 和轮询的模式不同,长轮询是一次 ...

  8. Django-Rest framework中文翻译-Request

    REST framework的Request类扩展自标准的HttpRequest,增加了REST framework灵活的请求解析和请求验证支持. 请求解析 REST framework的Reques ...

  9. L2-006. 树的遍历（不建树）

    L2-006. 树的遍历   给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(<=30),是二叉树中结点 ...

  10. IDEA建立一个可运行的struts2项目

    参考博客:https://blog.csdn.net/shuai_wy/article/details/79027573 直接使用IDEA创建struts2项目,配置好tomcat后是跑不起来的 需要 ...