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


相关推荐

  • win10eplan激活码破解步骤【中文破解版】

    (win10eplan激活码破解步骤)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月22日
    207
  • python偏函数理解_python进阶路线

    python偏函数理解_python进阶路线什么是偏函数partialpython中提供一种对于函数固定属性的函数偏函数的作用把一个函数的某些参数给固定住(也就是设置默认值),返回一个新的函数偏函数的语法使用偏函数必须先导入from

    2022年7月29日
    7
  • Navicat Premium 12激活成功教程激活

    Navicat Premium 12激活成功教程激活下载NavicatPremium12并安装;蓝奏云下载:NavicatPremium12注册机重要提示:该注册机来源于DeltaFoX。一般来说,由于注册机会修改.exe文件或.dll文件,加壳并且没有数字签名,所以杀毒软件会报毒。如需使用本注册机或者下载后找不到文件,需要关闭杀毒软件或将本注册机添加至杀毒软件白名单。自行决定是否使用本注册机。以管理员身份运行此注册机:…

    2025年7月30日
    4
  • pycharm怎么调背景_背景图片简约

    pycharm怎么调背景_背景图片简约设置的路径为:File|Settings|Appearance&amp;amp;Behavior|Appearance选择BackgroundImage弹窗的窗口中Image:点击最右边选择图片opacity:透明度中间的图形表示图片效果.最右边的九宫格,可以调整图片的显示,如果不想显示图片的上半部分,点击上面的格子即可,同理往下是不显示图片的下面内容Editoran…

    2022年8月27日
    4
  • 高等数学 – 数列极限定义 – 笔记

    高等数学 – 数列极限定义 – 笔记数列极限定义是个很让我费解的内容,所以花了一下午的时间去理解它,并将得到的结论记录在此。专科级理解,各路大神敬请指教。

    2022年6月11日
    41
  • gbk编码表_河北十一选五五码基本分布图

    gbk编码表_河北十一选五五码基本分布图1.GBK码位分布图2.GBK码位说明GBK亦採用双字节表示,整体编码范围为8140-FEFE,首字节在81-FE之间,尾字节在40-FE之间,剔除xx7F一条线。总计23940

    2022年8月1日
    5

发表回复

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

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