为什么align-items不将div居中？
align-items属性是用来设置flex容器中的项目在交叉轴上的对齐方式。默认情况下，align-items的取值为stretch，即项目会被拉伸以填满整个交叉轴。
如果希望将一个div元素居中，可以使用align-items属性的其他取值，如center。这样设置后，div元素会在交叉轴上居中对齐。
然而，如果div元素没有设置高度或者高度为auto，那么align-items属性将不会生效。因为在默认情况下，div元素的高度会根据其内容自动调整，所以无法在交叉轴上居中对齐。
解决这个问题的方法是给div元素设置一个固定的高度，或者使用其他的布局方式，如使用flex布局的justify-content属性来实现水平居中。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云弹性伸缩（AS）：https://cloud.tencent.com/product/as
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云原生数据库TDSQL：https://cloud.tencent.com/product/tdsql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
2回答
为什么align-items不将div居中？
html、css、flexbox
所以我试着在正文中垂直居中标题下的文本。我所学到的是使用align-items，因为我已经将div的display更改为flex。这里会有什么问题呢？display: flex; justify-content: space-between; align-itemstransition-duration: 0.8s; font-size: 1.25rem;
.c
浏览 20提问于2021-09-04得票数 0
4回答
为什么div不取总宽度的90%？
javascript、css、reactjs、flexbox、styled-components
你能告诉我为什么div不取总宽度的90%吗？width: 90%;它需要宽度，但是当我像这样写的时候，它不会 justify-content: center; height: 100vh; display: flex; align-items
浏览 2提问于2019-10-10得票数 0
2回答
使搜索栏和按钮在标题中垂直居中
html、css、forms、svg、header
我正在尝试居中的搜索栏和按钮在标题，以便它总是垂直居中与SVG的标志，但不能自己解决它。会很感谢你的帮助。提前感谢！
浏览 22提问于2017-03-10得票数 3
回答已采纳
1回答
我想把两个跨度放在一个div中，中间是，一个跨的。然而，如果我文本对齐:居中的外部div那么(当然)，它是两个跨度的组合将是中心。下面的类的正确CSS代码是什么？谢谢!<div class="div_with_spans">
<span class="span_centered">Centered text</span><span class="span_next">More teext&
浏览 3提问于2017-03-17得票数 2
回答已采纳
3回答
当flexbox设置为所有项目居中对齐并对齐时，为什么文本不居中？
html、css、flexbox
我使用代码的目标是使容器div中的文本垂直和水平居中。.container { display: flex; justify-content: center;}
box-sizing: border-box;
浏览 3提问于2018-02-11得票数 1
3回答
为什么在flexbox中负边距-顶部不起作用？
css、flexbox、margin
border: 1px solid red; height: 200px; display: flex; background-color: gray; right: 20px;} <div id="a1"
浏览 0提问于2021-01-18得票数 1
2回答
转换:转换(-50%，-50%)导致文本模糊
html、css
我有一个需要居中的div --但是使用left: 50%;使div中的所有内容变得模糊。是否有任何当前的解决方案或其他方法来正确地居中div？
浏览 1提问于2017-02-26得票数 2
回答已采纳
2回答
css中的动态填充
css
假设我有一个外部和内部div，其中外部div的大小是固定的(边框大小)，但内部div的大小是未知的。有没有办法给外部div填充，使内部div居中？(使用css/scss) <div class="inner"></div>
.outer
浏览 1提问于2017-07-29得票数 0
3回答
为什么我的头垂直中心它的孩子？
html、css
我很难理解display: flex的默认行为 display: flex; align-items: center; max-width: 1224px;}
浏览 5提问于2021-07-30得票数 1
回答已采纳
2回答
在flexbox项目中垂直居中文本
html、css、vertical-alignment、flexbox
我想要的弹性项目采取完全高度，但里面的内容是垂直居中。在本例中，我希望数字垂直居中：.flex-container { margin: 0; display: flex;
浏览 1提问于2015-01-01得票数 16
回答已采纳
1回答
对齐-项目:中心；不按预期工作
html、css、flexbox
我刚刚读了大卫的文章，并决定试一试，所以我自己做了下面的例子： <div></div> align-items:center;}
backg
浏览 3提问于2015-12-30得票数 4
回答已采纳
2回答
如何使用css使HTML元素在页面上居中
html、css
border-style:outset; border-width:5px;如果该元素中的文本足够长(足以超过max-width:70%;)，则该元素在页面上的居中位置与我希望的位置完全相同不久前，当我试图旋转一个元素时，我可以使用以下命令选择元素的旋转点transform:rotate(90deg);
有没有类似的方法来选择元素在页面上居中的点
浏览 1提问于2021-11-29得票数 0
3回答
多个div在换行时居中
css
我有一个包含多个div(大于2)的容器： <div></div> <div></div>当屏幕尺寸太小而无法容纳所有div时，我希望将这些div<
浏览 0提问于2021-04-13得票数 0
6回答
使图像在div中居中
html、css
我已经将div中图像的边框设置为none。现在，我想要将该图像放在其包含的div中。我试过使用margin: 0 auto;，但不起作用。<body> <div id="banner">
<img src="logo
浏览 2提问于2010-01-26得票数 13
回答已采纳
1回答
下拉导航不会在移动屏幕上呈现所有选项
html、css、twitter-bootstrap、responsive-design
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> </button>
<div<span class="care
浏览 13提问于2020-03-29得票数 0
2回答
用div结构替换垂直:中间，对齐:中心表格
html、css、flexbox
我创建的大多数东西都需要居中，但如果需要的话，可以进行缩放，所以我使用表格布局来帮助内容居中，就像我多年来所做的那样。然而，随着flex的引入，我相信这已经变得更有效率(更少的html )。--app-->
<h1>Step 1: Name your character.--/app-->
</div</em
浏览 11提问于2017-01-16得票数 0
回答已采纳
1回答
Clartiy DesignSystem如何调整旋转器的中心
vmware-clarity
如何在页面中间居中放置微调器？ <div class="content-area" *ngIf="!document"></div> 我尝试了几种css-class和center的组合，但对我不起作用。
浏览 9提问于2020-05-02得票数 0
2回答
网格垂直中心化文本CSS
html、css
在每个象限中，我希望文本的垂直和水平居中。我的文本是水平的，但不是垂直的。这是我的一部分网格的图片。
浏览 5提问于2020-07-25得票数 1
回答已采纳
我需要从每个框中居中这3个div的文本，我尝试使用justify-content: center，但text-align: center不起作用，我如何将这些文本居中？ position: relative display: flex; <a href="">
<<
浏览 43提问于2019-08-02得票数 0
回答已采纳
2回答
CSS - align- items :居中不居中项目
html、css
我在1个元素中有4个元素，如下所示：<div class="gt-col"></div>
<div class="gt-col"></div&
浏览 1提问于2020-07-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
