flex垂直居中问题「建议收藏」

flex垂直居中问题「建议收藏」.container{ display:flex; justify-content:center; aligin-items:center;}垂直居中当内容超过container,上方会超出容器设置.item{ margin:auto;}或:justify-content:safecenteralign-self:safecenter

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

.container{
	display: flex;
	justify-content: center;
	aligin-items: center;
}

垂直居中当内容超过container,上方会超出容器

设置

.item{
	margin: auto;
}

或:

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

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

(0)
上一篇 2022年6月4日 下午7:36
下一篇 2022年6月4日 下午7:46


相关推荐

  • cacl的使用

    cacl的使用1 居中元素使用 calc 给我们提供另一个垂直元素的解决方案 如果我们知道元素的尺寸 一个典型的解决方案使用负外边距移动自身距离高于宽的一般 如下 对于 300px 300px position absolute top 50 left 50 margin top 150px margin left 150px 如果使用 calc 函数 那么我

    2026年3月26日
    2
  • JavaScript中数组Array方法详解[通俗易懂]

    JavaScript中数组Array方法详解[通俗易懂]ECMAScript3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的。1、Array.join()方法Array.join()方

    2022年7月4日
    20
  • oracle10g在win10上的安装

    oracle10g在win10上的安装一、下载官网下载地址: https://www.oracle.com/downloads/index.html#menu-downloads或者:链接:http://pan.baidu.com/s/1cGr3PW密码:oz8n下载解压后得到:三个安装包:PL/SQLDe

    2022年10月9日
    4
  • VUE学习笔记

    VUE学习笔记

    2021年7月11日
    87
  • 算法时间复杂度分析(一)

    算法时间复杂度分析(一)金庸武侠中描述一种武功招式的时候,经常会用到“快、准、狠”这3个字眼。同样,在计算机中我们衡量一种算法的执行效率的时候也会考量3个方面:“快、省、稳”。具体点来讲就是我们在实现某一种算法的时候,最终目的就是要求计算机(CPU)在最短的时间内,用最少的内存稳定的输出正确的结果。这一章节主要来理解“快”,至于“省”和“稳”,我会在后续章节进行讲解。那如何来判断某一段代码运行的是否足够快呢…

    2022年5月14日
    51
  • HP发布Jenkins最新UFT开源插件

    HP发布Jenkins最新UFT开源插件就在UFT11.5发布之时,HP同时也发布了针对UFT的Jenkins开源插件1)通过此插件可以运行来自HPALM/QC或本地存储的测试脚本2)你可以选择多个指定脚本甚至是文件夹3)此插件会运行文件夹下的所有测试脚本4)在build机上可以通过配置运行测试脚本5)当然也可在远程机器上指定6)如果你的测试脚本存储在HPALM/QC的测试集中,则可以通过配置jenkins运

    2022年5月28日
    56

发表回复

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

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