flex布局实现div的水平垂直居中

flex布局实现div的水平垂直居中代码如下:<divclass="outerContainer"><divclass="innerContent"></div></div>.outerContainer{width:100%;height:100%;background:#eee;display:flex;jus…

大家好,又见面了,我是你们的朋友全栈君。

代码如下:

<div class="outerContainer">
    <div class="innerContent"></div>
</div>
.outerContainer{ 
   
    width:100%;
    height:100%;
    background:#eee;
    display:flex;
    justify-content: center;
    align-items: center;
}
.innerContent{ 
   
    width:300px;
    height:300px;
    background: #fff;
    border:1px solid #ccc;
}

效果图:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143096.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 服务器可以ghost备份吗_服务器可以用dism备份吗

    服务器可以ghost备份吗_服务器可以用dism备份吗带RAID服务器能GHOST备份吗?一、不可以的原因:1、从saymantec上查询到不行:Ghost与RAID的兼容性情形本文介绍Ghost与使用RAID的计算机的兼容性。解释请注意:无论驱动器使用软件级RAID还是硬件级RAID,赛门铁克都不提供制作RAID驱动器映像的技术支持。能否成功制作RAID驱动器映像取决于特定的计算机模型、驱动程序控制器、硬盘驱动器和…

    2022年9月5日
    2
  • Hadoop体系_集团架构

    Hadoop体系_集团架构目录2.1Hadoop简介2.1.1Hadoop由来2.1.2Hadoop发展历程2.1.3Hadoop生态系统2.2Hadoop的体系架构2.2.1分布式文件系统HDFS2.2.2分布式计算框架MapReduce2.2.3分布式资源调度系统YARN2.2.4三大发行版本2.1Hadoop简介自从大数据的概念被提出后,出现了很多相关技术,其中对大数据发展最有影响力的就是开源分布式计算平台Hadoop,它就像软件发展史上的Win…

    2022年10月17日
    0
  • 阿里巴巴Java开发手册.pdf (详尽版 和 终极版)

    阿里巴巴Java开发手册.pdf (详尽版 和 终极版)阿里巴巴Java开发手册已经是国内Java编码的行业规范笔者特意提供了阿里巴巴Java开发手册(详尽版).pdf阿里巴巴开发手册终极版2019.pdf扫描下面的二维码或搜索公众号【技术杂谈】点击关注并回复【Java开发手册】即可获取下载链接…

    2022年7月7日
    62
  • go微服务框架go-micro深度学习(二) 入门例子

    go微服务框架go-micro深度学习(二) 入门例子

    2021年6月13日
    319
  • mysql 各个版本的驱动 jar 包

    mysql 各个版本的驱动 jar 包http://central.maven.org/maven2/mysql/mysql-connector-java/

    2022年5月21日
    40
  • pycharm菜单栏不见了_pycharm左侧项目栏隐藏

    pycharm菜单栏不见了_pycharm左侧项目栏隐藏ctrl+Alt+shif打开搜索窗口,然后输入Experimentalfeatures 取消linux.native.menu选项的复对勾,应用更改并关闭,重启PyCharm。

    2022年8月25日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号