关于css中flex布局垂直居中失效问题的原因

项目中遇到用flex进行页面布局后,使用上下居中设置:align-item: center;

目标效果如下:

但是失效,不起作用,如下图所示:

各种排查过后发现设置了子模块 align-self 属性,这会覆盖容器上的 align-items 设置,直接导致父元素的align-item: center;失效,无法垂直居中。

注:align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

相关推荐
大G哥3 分钟前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext4 分钟前
html初识
前端·html
小小小小宇16 分钟前
一个功能相对完善的前端 Emoji
前端
m0_6278275217 分钟前
vue中 vue.config.js反向代理
前端
Java&Develop19 分钟前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk22 分钟前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务
摆烂工程师31 分钟前
全网最详细的5分钟快速申请一个国际 “edu教育邮箱” 的保姆级教程!
前端·后端·程序员
HhhDreamof_35 分钟前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya39 分钟前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn011 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js