方法一： 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. elasticsearch+kibana setup

    加载示例数据,设置index的时候出错: 提示 forbidden 则可能是es的问题,需要执行如下命令: curl -XPUT -H "Content-Type: application/ ...

  2. Horovod 通信策略

    因为最近的工作要和Horovod打交道,所以分析了Horovod的源码.在这里记一笔. Horovod有几个亮点,第一,它不依托于某个框架,自己通过MPI建立了一套分布式系统,完成了allreduce ...

  3. nginx配置, 启动命令, 反向代理配置

    2014年1月3日 13:52:07 喜欢这样的风格,干货 http://huoding.com/2013/10/23/290 -----------------下边是我自己的经验(windows)- ...

  4. 小D课堂 - 新版本微服务springcloud+Docker教程_3-06 服务注册和发现之Eureka Client搭建商品服务实战

    笔记 6.服务注册和发现之Eureka Client搭建商品服务实战     简介:搭建用商品服务,并将服务注册到注册中心 1.创建一个SpirngBoot应用,增加服务注册和发现依赖     2.模 ...

  5. 自动化部署 jenkins 插件简介

    一.什么是持续集成? (1)Continuous integration(CI) 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员至少集成一次,也就意味着每天可能会发生多次集 ...

  6. centos7安装kvm及kvm管理

    一.安装kvm 查看CPU是否支持虚拟化  grep -E 'svm|vmx' /proc/cpuinfo - vmx is for Intel processors - svm is for AMD ...

  7. 8. find

    find使用 find命令的主要作用是对树形目录层次结构进行彻底检查. find命令的一般格式: find pathname -expressions     find常用表达式 在当前文件夹中找出名 ...

  8. 数据库文件结构、sqlserver ON [PRIMARY]

    在sqlserver创建表的语句中,最后总来一句on[primary],这到底是什么意思? .联机丛书中CREATE TABLE的语法下似乎没有找到.最后终于发现,具体如下: 在CREATE TABL ...

  9. vue如何获取并操作DOM元素

    原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...

  10. iptables基本命令到深入

    1.关闭firewalld,安装iptables-server并启动服务 systemctl stop firewalld systemctl disable firewalld yun -y ins ...