方法一： 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. 异常值检验实战1--风控贷款年龄变量(附python代码)

    python风控评分卡建模和风控常识(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005214003&am ...

  2. 【学习笔记】QT常用类及应用

    一.QT基类: QObject 二.QT中常用的库 QT中的类根据功能划分在不同的库中,在用户属性.pro文件中可以看到. 三.Qt基本对话框的使用 常用5类: 通过类名可以直接调用类的静态成员函数. ...

  3. java.io.IOException: Cleartext HTTP traffic to xxx.xxx.xxx.xxx not permitted

    java.io.IOException: Cleartext HTTP traffic to xxx.xxx.xxx.xxx not permitted 转 https://blog.csdn.net ...

  4. mybatis工作流程

    1)通过Reader对象读取src目录下的mybatis.xml配置文件(该文本的位置和名字可任意) 2)通过SqlSessionFactoryBuilder对象创建SqlSessionFactory ...

  5. manifest节点

    xmlns:android属性——定义命名空间 这个属性定义了这个XML文件所使用的命名空间.如果需要指定特殊的命名空间,就需要手动编写代码,在Android Studio基本格式如下: xmlns: ...

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

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

  7. JVM调优小结

    JVM调优浅谈 https://www.cnblogs.com/andy-zhou/p/5327288.html   1.数据类型 java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类 ...

  8. Java集合(1)：Collections工具类中的static方法

    与Arrays一样,Collections类中也有一些实用的static方法. (1) 排序操作 reverse(List list):反转指定List集合中元素的顺序 shuffle(List li ...

  9. RocketMQ之四：RocketMq事务消息

    事务消息 通过消息的异步事务,可以保证本地事务和消息发送同时执行成功或失败,从而保证了数据的最终一致性. 发送端执行如下几步: 发送prepare消息,该消息对Consumer不可见 执行本地事务(如 ...

  10. 异步模型 requestAnimationFrame

    异步模型 requestAnimationFrame 前言 window.requestAnimationFrame() 告诉浏览器--你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函 ...