方法一： align-self（解决父元素下面单个子元素布局方式）

父级加上

　div{display：flex}

子元素

span {

  flex-grow: 1;

  align-self: center;

}

这种方法仅仅适应于外层元素中只包含一个子元素，或者子元素是独占一行的，因为这个时候对子元素进行设置宽度是无效的,设置了 flex-grow: 1；会是如下的效果

如果想设置一个div水平垂直都居中那么只需要将flex-grow去掉，加上宽度并设置margin:auto即可，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>lazyload</title>

    <style>

        html,body{

            margin:0;

            padding:0;

            width:100%;

            height:100%

        }

        #pictures{

            display:flex;

            width:100%;

            height:100%

        }

        #pictures>span{

            width:200px;

            height:200px;

            border:1px solid red;

            flex-grow:1;

            align-self:center

        }

    </style>

</head>

<body>

    <div id="pictures">

        <span></span>

    </div>

</body>

</html>

效果

注意：align-self 只能是对子元素起作用，父元素设置了display:flex后，对指定的子元素设置的时候可以用到 align-self

例如  有多个子元素，我就想让其中的一个进行居上，这个时候就可以对指定的元素设置 align-self设置flex-start

align-self属性值：

align-self: auto | flex-start | flex-end | center | baseline | stretch;

方法二：align-items

父级元素加上  

display: flex;

align-items: center; /*定义body的元素垂直居中*/

justify-content: center; /*定义body的里的元素水平居中*/

直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        body {

            display: flex;

            align-items: center; /*定义body的元素垂直居中*/

            justify-content: center; /*定义body的里的元素水平居中*/

        }

        .content1,.content2 {

            width: 300px;

            height: 300px;

        }

        .content1{

            background: orange;

        }

        .content2{

            background:pink;

        }

    </style>

</head>

<body>

    <div class="content1"></div>

    <div class="content2"></div>

</body>

</html>

效果：

使用flex布局解决百分比高度元素垂直居中的更多相关文章

  1. flex布局嵌套之高度自适应

    查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件) 效果图: html代码:(关键地方已经用颜色特别标识 ^_^) <!DOCTYPE ht ...

  2. flex布局控制最后一个元素右浮动

    可以在最后一个元素添加css属性 margin-left: auto; 例如我一排排列的元素 ,子元素并没有完全排列撑开父元素的宽度,这时候要使最后一个元素想最右 可以让最后一个元素的 margin- ...

  3. flex布局 一行4个元素 后面不够4个元素对齐

    html 父元素 .container { display: flex; flex-wrap: wrap;} 子元素.list { width: 24%; height: 100px; backgro ...

  4. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  5. CSS布局：元素垂直居中

    CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...

  6. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  7. 谈谈flex布局实现水平垂直居中

    我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...

  8. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  9. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

随机推荐

  1. 解决Sublime Text3中文显示乱码问题

    一.安装包管理器 使用Ctrl+~快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码 import urllib.request,os; pf = 'Package ...

  2. 小D课堂 - 新版本微服务springcloud+Docker教程_5-01分布式核心知识之熔断、降级

    笔记: 第五章 互联网架构服务降级熔断 Hystrix 实战 1.分布式核心知识之熔断.降级讲解     简介:系统负载过高,突发流量或者网络等各种异常情况介绍,常用的解决方案 1.熔断:       ...

  3. Expecting "jsp:param" standard action with "name" and "value" attributes

    浏览器访问报如下jsp标签错误: 根据提示,定位到jsp页面124行,代码如下: 查找原因,当<jsp:include></jsp:include>标签中没有参数时,不允许有空 ...

  4. 图解Go协程调度原理，小白都能理解

    阅读本文仅需五分钟,golang协程调度原理,小白也能看懂,超实用. 什么是协程 对于进程.线程,都是有内核进行调度,有CPU时间片的概念,进行抢占式调度.协程,又称微线程,纤程.英文名Corouti ...

  5. 上传NUnit的单元测试结果和OpenCover的单元测试覆盖率到SonarQube服务中

    SonarQube.Scanner.MSBuild.exe begin /k:"OMDCCQuotes" /d:sonar.host.url="http://myip:9 ...

  6. springboot-springmvc

    0依赖 <!-- jsp --> <dependency> <groupId>org.apache.tomcat.embed</groupId> < ...

  7. RocketMQ之八：水平扩展及负载均衡详解

    RocketMQ是一个分布式具有高度可扩展性的消息中间件.本文旨在探索在broker端,生产端,以及消费端是如何做到横向扩展以及负载均衡的. NameServer集群 提供轻量级的服务发现和路由.每个 ...

  8. Mac 安装Mysql 之 Sqlservice 区别

    Mysql 一.下载mysql    官网“Community “ 下会看到“MySQL Community Server”下方有一个“download”点击.   在Mac OS上的MySQL的版本 ...

  9. list-style-type:none是加在ul还是li中呢？

    很多时候我们都需要多对列表元素进行初始化,方法是给列表元素添加list-style-type: none,但作为小白的我是经常纠结一个问题:是把它加在ul中还是li中呢 我试了一下,加在ul和li都能 ...

  10. vue2.0 子组件props接受父组件传递的值，能不能修改的问题整理

    父组件代码: <!-- --> <template> <div class=''> <el-link type="danger">传 ...