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;
}

效果图:

在这里插入图片描述

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pycharm无法使用中文输入法_游戏内无法输入中文

    pycharm无法使用中文输入法_游戏内无法输入中文第一步:点击【File】—【Setting】—【Editor】—【FileEncoding】页面,设置global和projectencoding为UTF-8,然后点击应用。第二步:点击【File】—【Setting】—【Editor】—【FileandCodeTemplates】,点击右边的【pythonscript】,在编辑框中输入:#-*-codi

  • kubernetes k8s删除namespaces 时一直处在Terminating的问题解决

    kubernetes k8s删除namespaces 时一直处在Terminating的问题解决

  • 【数据结构】单链表上的基本运算

    【数据结构】单链表上的基本运算【数据结构】单链表上的基本运算

  • 【数据结构】字典树TrieTree图文详解

    【数据结构】字典树TrieTree图文详解问题引入现在,我给你n个单词,然后进行q次询问,每一次询问一个单词b,问你b是否出现在n个单词中,你会如何去求呢?暴力搜索?但是我们如果这么做的话时间复杂度一下就高上去了。大家都是成熟的ACMer了,不要再惦记着暴力的方法啦,要优雅。你想想,问题的描述像不像查字典的操作?你平时是怎么查字典的?想想看?如果你要在字典中查找单词“Avalon”,你是不是先找到首字母为‘A’的部分,然后再找第二个单词为‘V’的部分······最后,你可能可以找到这个单词,当然,也有可能这本词典并没有这个单词。你想想看,

  • stat 函数详解

    stat 函数详解stat函数作用:获取文件信息头文件:include<sys/types.h>#include<sys/stat.h>#include<unistd.h>​函数原型:intstat(constchar*path,structstat*buf)​返回值:成功返回0,失败返回-1;​参数:文件路径(名),structstat…

    2022年10月24日
  • Python 换行符以及如何在 Python 输出时不换行

    Python 换行符以及如何在 Python 输出时不换行Python中的换行符用于标记行的结尾和新行的开始。如果你想将输出打印到控制台并使用文件,那么你非常需要知道如何使用它。在本文中,你将学习:如何在Python中识别换行符 如何在字符串和打印语句中使用换行符 如何编写不会在字符串末尾添加换行符的打印语句我们开始吧!✨????换行符Python中的换行符是:它包含两个字符:一条反斜线 字母n如果你在字符串中看到此字符,则表示当前行在该点结束,并在其后立即开始新行:你也可以在格式化字符串(f-stri…

    2022年10月21日

发表回复

您的电子邮箱地址不会被公开。

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