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


相关推荐

  • 使用C++编写一个DHT爬虫,实现从DHT网络爬取BT种子

    使用C++编写一个DHT爬虫,实现从DHT网络爬取BT种子使用C++编写一个DHT爬虫,实现从DHT网络爬取BT种子1、相关术语1.1、P2P网络1.2、DHT网络1.3、Kademlia算法1.4、KRPC协议1.5、MagNet协议1.6、本段小结2、BT下载的一些概念梳理2.1、BT软件下载原理2.2、迅雷获取种子的速度为什么那么快2.3、资源时效性问题2.4、好用的BT软件2.5、有没有已经编写好的DHT爬虫3、使用C++编写DHT爬虫3.1、实现原理3.2、实现DHT协议3.2.1、创建UDP服务3.2.2、加入DHT网络3.2.3、报文解析3.2.4、

    2022年5月1日
    59
  • 电脑爱好者2012年全彩高清PDF

    电脑爱好者2012年全彩高清PDF电脑爱好者2012年第01期.pdf电脑爱好者2012年第02期全彩高清PDF免费高速下载.pdf电脑爱好者2012年第03期全彩高清PDF免费高速下载.pdf电脑爱好者2012年第04期全彩高清PD…

    2022年4月27日
    41
  • HTML注释标签以及注释快捷键的用法

    HTML注释标签以及注释快捷键的用法<html><head><title></title></head><body><!–注释内容–></body></html>…

    2022年6月6日
    104
  • Linux 审计日志记录,linux日志服务器审计客户端history记录「建议收藏」

    Linux 审计日志记录,linux日志服务器审计客户端history记录「建议收藏」需求将每台服务器上的每一个用户执行的命令、执行时间、登陆时间、主机ip、当前切换用户等信息保存到本地并实时传输至日志服务器进行异地保存。nginxIPhostname角色10.10.99.1test1rsyslog-server10.10.99.2test2rsyslog-client工具及服务1.loggerlogger是一个shell接口,能够经过该接口使用rsyslog的日志模块。webus…

    2022年6月4日
    77
  • 取(2堆)石子游戏(杭电2177)「建议收藏」

    取(2堆)石子游戏(杭电2177)

    2022年1月25日
    44
  • java时间类的使用和区别

    java时间类的使用和区别java中经常使用的6大时间类:java.util.Date              日期格式:年月日时分秒java.sql.Date               日期格式:年月日java.sql.Time               日期格式:时分秒java.sql.Timestamp          日期格式:年月日时分秒纳秒    从数据库中取出来的日期一般都用getTimestamp(…

    2022年6月13日
    26

发表回复

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

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