使用flex垂直居中(超简单)

使用flex垂直居中(超简单)flex+margin垂直居中-加粗样式在父级中使用flex,在子级中使用margin:autobody中的代码<body> <divclass=”a”> <divclass=”b”></div> </div></body>css样式.a{ width:500px; height:500px; border:1pxsolidblue; display:flex;}.b{

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

flex+margin垂直居中

加粗样式 在父级中使用flex,在子级中使用margin:auto

body中的代码

<body>
	<div class="a">
		<div class="b"></div>
	</div>
</body>

css样式

.a{
	 width: 500px;
	 height: 500px;
	 border: 1px solid blue;
	 display: flex;
 }
.b{
	 width: 300px;
	 height: 300px;
	 background: red;
	 margin:auto;
 }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

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


相关推荐

  • Windows.h 常用API函数【转】[通俗易懂]

    转自:https://blog.csdn.net/farmwang/article/details/50603608http://www.vbgood.com/api.htmlhttp://hi.baidu.com/3582077/item/9cc3483b581f53c5392ffae3第一个:FindWindow根据窗口类名或窗口标题名来获得窗口的句柄,该函数返回窗口的句柄,这…

    2022年4月6日
    51
  • oracle触发器实例

    oracle触发器实例最近有一个需求,一个数据库的表在插入和删除的时候另外一个数据库中的表也做相应的操作。我的想法是1.首先两个数据库可以连接,通过dblink可以解决。2.建立插入和删除才能触发的触发器。直接上代码createorreplacetriggersynch_useridafterinsertordeleteoneosoperatorFOREACHROW–每一行触发一次…

    2022年7月27日
    7
  • 产品产生过程「建议收藏」

    产品产生过程「建议收藏」产品产生过程

    2022年4月22日
    211
  • android之存储篇_SharedPreferences存储方式

    SharedPreferences是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息。其存储位置在/data/data//shared_prefs目录下。SharedPreferences对象本身只能获取数据而不支持存储和修改,存储修改是通过Editor对象实现。实现SharedPreferences存储的步骤如下:  一、根据C

    2022年3月10日
    603
  • Spring-data-JPA详细介绍,增删改查实现「建议收藏」

    Spring-data-JPA详细介绍,增删改查实现「建议收藏」本篇进行Spring-data-jpa的介绍,几乎涵盖该框架的所有方面,在日常的开发当中,基本上能满足所有需求。这里不讲解JPA和Spring-data-jpa单独使用,所有的内容都是在和Spring整合的环境中实现。如果需要了解该框架的入门,百度一下,很多入门的介绍。在这篇文章的接下来一篇,会有一个系列来讲解mybatis,这个系列从mybatis的入门开始,到基本使用,和spring整合,和第

    2022年6月7日
    39
  • vim 文本编辑器[通俗易懂]

    vim 文本编辑器[通俗易懂]4.2 vim文本编辑器4.2.1 简介vim是vi的升级版,最常见的区别是能用多种颜色显示显示系统文件的一些特殊信息。vi:VisualInterface文本编辑器,可视化接口vim:viiMprove的缩写,即vi的增强版vim编辑器分为三种主要模式:命令模式(编辑模式):默认模式,移动光标,剪切/粘贴文本(界面表现:左下角显示文件名或为空)插入模式(输入模式):修…

    2022年6月7日
    37

发表回复

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

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