解决align-items：center失效，无法垂直居中问题

于 2022-03-01 14:02:22 发布 2953 收藏 3
文章标签： linq p2p tv
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w1753034677/article/details/123204405
版权

#main{
    display: flex;
    justify-content: center;
    align-items: center;
                
}

这是因为main缺少高度，100%的高度是不起作用的，最好使用100vh来设置，这样就可以解决这个问题了 

 

w1753034677
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论
flex弹性布局align-items: ；属性为什么没有发挥效果的原因
weixin_47439061的博客
10-24 2374
今天10月24日程序员节 干饭王小吉正式入驻博客啊哈哈！ 分享一下flex弹性布局的使用，常使用：display: flex; flex-direction: ； justify-content: ; align-items: ;
在ie7下css居中样式text-align:center;偏左问题解决方法
09-25
css样式text-align:center;在ie7下偏左问题，想必有很多朋友的遇到过吧，下面有个不错的方法，大家可以参考下，希望对大家有所帮助
解决align-items失效，无法居中问题
angula
08-29 1万+
在做flex布局的时候，有时候你可能会遇到align-items失效的问题，那么下面来说一下 css #main{ display: flex; justify-content: center; align-items: center; } #content{ width: 100px; height: 100px; background-color: #1890FF; } 此时align-items失效，只能水平居中，.
flex布局：子项flex-content对齐方式失效排查解决
最新发布
鸡肋佐的博客
02-22 86
flex布局：子项flex-content对齐方式失效排查解决
css align-items: center 垂直居中不生效
lonvik的博客
01-09 960
遇到这个问题，你可能想实现这样的样式！！ 垂直居中不生效，换个思路就行啦 display: flex; justify-content: center;
html td 垂直居中无效,css中解决vertical-align: middle垂直居中无效方法
weixin_42144201的博客
06-03 1916
在css中要实现内容垂直居中我们的css有个vertical-align: middle; 属于，但是一般情况下是没有效果的，下面我们来看解决办法。div水平居中很容易，设置css样式 text-align: center; 就可以了。垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。第一种方法：通过一个空白图片可以达到垂直居中的效果代码如下：图片...
【已解决】align-items：center失效，无法垂直居中问题！
蹦极的考拉
09-25 1554
解决方案，注意将父元素设置高度，还有如果是单独页面，设置高度为100vh。如果你的父元素没有高度，那么子元素不会垂直居中问题。
text-align:center 实现文字居中对齐与 align-items:center 实现div内所有标签对齐
XyuanL的博客
05-12 7171
初始化样式： <style> div{ border:solid 1px red; margin-top: 5px; } span{ border:solid 1px blue; } </style> ...
justify-content: center无效
duo_shine的博客
02-24 8104
临危受命，N久没有碰小程序了，我只好拿起我半吊子的小程序开始干活！ 我的代码如下： display: flex; flex-direction: column; justify-content: space-around; align-items: center; height: 100%; 想实现的是一个水平和垂直方向都居中的效果，如下： 可一直都只能通过align-it...
微信小程序 align-items:center
易天海
04-08 5377
.w-balance-area { display:flex; padding:20rpx; align-items:center; } 去掉align-items:center的效果 .reward .reward-head{ display: flex; padding:30rpx; } .reward .reward-head .detail-text{ flex...
flex居中（justify-content: center和 align-items:center ）遇坑。
热门推荐
qq_44983621的博客
03-10 1万+
justify-content: center和 align-items:center 当你使用flex布局时 会经常用到这两个属性但是有时会发现为什么失灵了，为什么怎么样都居中不了，明明刚才还管用 ，（前几天博主就遇到了这种情况）… 这个连个属性在网上查到的都是说前者是水平居中后者是垂直居中 但是其实这种是不完全正确的只是其中一种情况，如果是另一种情况的话就会失效。 步入正题那么是为什么会...
HTML+CSS之设置元素的水平垂直居中
weixin_44827643的博客
07-04 217
本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中。justify-content:center：水平居中align-items:center：垂直居中 2.弹性布局（换行） justify-content:水平居中align-content:center:垂直居中 3.定位（2D变化） 利用定位的top及left初步进行居中定位，发现会多偏移宽高的二分子一，通过translate向左和向上移动元素自身宽高的一半，即可实现垂直居中效果。 4.定位（过度约束） 利用网页布局的过度约
彻底搞定vertical-align垂直居中不起作用疑难杂症
weixin_33739523的博客
02-09 2157
原本我的文章标题是深入探讨line-height与vertical-align的疑难杂症，但这样似乎没能针对性的抛出一个问题，故改成“彻底搞定vertical-align垂直居中不起作用疑难杂症”。因此，本文讲解的还是line-height和vertical-align。至于各种垂直居中的方法，网上包括掘金里已有不少文章介绍，本文仅讲解针对vertical-align对齐的方式。 本文所有例子的现...
text-align无法实现内容居中的原因分析及解决办法
qq1722377628的博客
04-14 4603
<div class="loading"> <img src="./loading.png" alt="图片丢失了" /> <span class="text">{{text}}</span> </div> 为了让图片和文字水平垂直方向都居中，我使用stylus（就当CSS理解）如下： .loading po...
height:100%和height:100vh以及align-items: center 不生效问题
qq_46551308的博客
09-11 807
vh就是当前屏幕可见高度的1%，也就是说 height:100vh ==height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 使用disply:flex; align-items: center 不生效的时候 因为当前的div是没有高度的，所以不生效 设置height:100vh 即可生效 ...
解决 flex align-items：center 无法居中（微信小程序）
weixin_42371145的博客
07-16 1万+
转自：https://www.cnblogs.com/zzd0916/p/7218451.html 进击的小牛牛 因为最近再做小程序，需要用到flex布局，因为写惯了web项目，初次学习确实感弹性布局的强大（关键是不用再管可恶的ie了）。 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。 解决方法： 1.确定好自己的主轴方向是不是row，如果是co...
flex深度剖析-解决移动端适配问题！
高先生的猫
03-31 1222
前言 上回说到，移动端适配，推荐了，使用px为主，vw,百分比为辅助，再搭配flex的布局方式，于是有人就开始问我了，这个flex搭配布局应该怎么用，梳理一遍，巩固一下 flex前世今生 在前端刚刚兴起html,css,js，还停留在初级阶段是的时候，前端工程化还不存在的时候，jqery还在统治江湖的时候，以及这张图还在大火的时候，额！我又盗图了 我么们想要实现两个d...
css flex布局 —— 容器属性 align-items
且听风吟的博客
09-28 1294
css flex布局 —— 容器属性 align-items
flex布局解决align-items失效，无法居中问题
qq_36608036的博客
02-27 6918
1.flex布局 #main{ display: flex; justify-content: center; align-items: center; } #content{ width: 100px; height: 100px; background-color: #1890FF; } 上面的布局会出现无法垂直居中的问题 这是因为main缺少高度，100%的高度仍然不起作用，最好使用100vh来设置，这样就可以解决这个问题。 在#main样式里加上：height: 100vh; #m
小程序中align-items: center竖直方向居中失败解决办法
Z_hongli的博客
11-12 2334
垂直居中失败现象 可以看到我在CSS中设置了水平和垂直居中，但是显示出来并没有效果 CSS中代码 .Nav_text{ display: flex; align-items: center; justify-content: center; } 原因/解决办法 原因其实很简单，因为我这个文本是单独设置的，但是他没有设置高度，自然也就没法居中，现在我把它的高度大小设置同它的父容器一样高就行了 CSS .Nav_text{ height: 100rpx; display: flex;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

w1753034677

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值