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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 数据库主从复制_sqlserver主从复制

    数据库主从复制_sqlserver主从复制一、什么是主从复制?主从复制,是用来建立一个和主数据库完全一样的数据库环境,称为从数据库;主数据库一般是准实时的业务数据库。二、主从复制的作用(好处,或者说为什么要做主从)重点!1、架构的扩展。业务量越来越大,I/O访问频率过高,单机无法满足,此时做多库的存储,物理服务器增加,负荷增加。2、读写分离,使数据库能支撑更大的并发。主从只负责各自的写和读,极大程度的缓解X锁和S锁争用。在报表中尤其重要。由于部分报表sql语句非常的慢,导致锁表,影响前台服务。如果前台使用master,报表使用slave,那

    2022年8月13日
    5
  • 调试HotSpot源代码(配视频)

    调试HotSpot源代码(配视频)

    2020年11月20日
    234
  • 项目管理小小知识点总结

    项目管理,有许多知识点需要日常中总结和积累,从这里开始吧:1、项目沟通渠道数计算公式:[N*(N-1)]/2分子可知数量级为:N的平方。2、水晶头个数计算:N*4*1.153、信息化6大要素

    2021年12月25日
    43
  • java学习——java面试【事务、锁、多线程】资料整理

    成长之路,一起走!总结一些知识,方面自己学习,也方面热爱学习的伙伴们可以更好的成长! 项目直接是静态的Html,下载后可以直接访问! 地址:https://github.com/dufyun/kuyu/tree/master/kuyuTechHtml

    2022年2月25日
    55
  • linux修改密码报错_linux修改其他用户密码

    linux修改密码报错_linux修改其他用户密码第一种:/usr/bin/passwd的权限中没有添加s即SUID特殊权限即:-rwxr-xr-x.1rootroot270008月222010/usr/bin/passwd解决方案:chmodu+s/usr/bin/passwdSUID的功能简单的说就是让组用户或其他用户在执行该文件是拥有文件所有者(own)权限,这里就是需要获取w(写)权限,这样才能将新密码写到/etc…

    2025年9月18日
    5
  • python drawcontours_2021-02-15 Python OpenCV drawContours()函数

    python drawcontours_2021-02-15 Python OpenCV drawContours()函数drawContours image contours contourIdx color thickness 1 lineType LINE 8 hierarchy noArray maxLevel INT MAX offset None 该函数用于绘制轮廓线或者填充轮廓线 如果参数 那么就绘制轮廓线 如果参数 则填充轮廓线内的区域 参数 image 目标图像 contour

    2025年8月30日
    1

发表回复

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

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