Flexbox:水平和垂直居中
基础概念
Flexbox（弹性盒子布局）是一种CSS布局模式，旨在提供一种更加灵活的方式来对容器中的子元素进行对齐、排序和分布。Flexbox通过将父容器设置为display: flex;来激活，从而使得子元素成为flex项。
优势
- 灵活性：Flexbox能够轻松地实现各种复杂的布局需求。
- 响应式设计：Flexbox布局能够很好地适应不同的屏幕尺寸和设备。
- 简化代码：相比传统的浮动和定位方法，Flexbox能够减少所需的CSS代码量。
类型
Flexbox布局主要涉及到两种类型的轴：
- 主轴（Main Axis）：默认情况下，主轴是水平方向，从左到右。
- 交叉轴（Cross Axis）：与主轴垂直的轴，默认情况下是垂直方向，从上到下。
应用场景
Flexbox广泛应用于网页布局中，如导航栏、表单、卡片布局等。
水平和垂直居中
在Flexbox中，可以通过以下属性实现水平和垂直居中：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使容器高度占满整个视口 */
border: 1px solid black;
}
.item {
padding: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Centered Content</div>
</div>
</body>
</html>遇到的问题及解决方法
问题：为什么子元素没有居中？
原因：
- 父容器没有设置
display: flex;。 justify-content或align-items属性没有正确设置。- 父容器的高度没有设置，导致垂直居中无效。
解决方法：
- 确保父容器设置了
display: flex;。 - 检查并设置正确的
justify-content和align-items属性。 - 如果需要垂直居中，确保父容器有一个明确的高度（如
height: 100vh;）。
参考链接
通过以上信息，你应该能够理解Flexbox的基本概念、优势、类型、应用场景以及如何实现水平和垂直居中。如果遇到具体问题，可以根据上述解决方法进行排查和修复。
相关·内容
2回答
CSS3 flexbox或flex布局允许轻松地将元素水平和垂直居中，即使元素的高度和宽度未知。
是否可以使用flex布局在页面中心绝对定位覆盖(高度和宽度未知)？
浏览 2提问于2013-05-26得票数 9
2回答
我有这个标记。我需要将相邻的<i>和<span>居中对齐(水平和垂直)。请指点一下。 <span (click)="onGoBackClick($event)" class="cursor-click">
<i class="fa fa-arrow-circle-left fa-2x"></i>
<span>Go back to previous page</span>
</span>
浏览 16提问于2019-05-01得票数 0
回答已采纳
我想用display:flex (justify-content: center；align-content:center;)将所有图像水平和垂直居中，但它不起作用-图像仍然位于父元素的顶部。有什么想法吗？
浏览 6提问于2019-11-15得票数 0
回答已采纳
我需要居中水平和垂直4个按钮使用Flex。我有两个cols。每列有两个按钮。我想把按钮水平和垂直居中。我试过next，但按钮没有垂直居中。 ? 风格 <style type="text/css">
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: cent
浏览 19提问于2019-04-14得票数 0
回答已采纳
我可以想出几种解决这个问题的方法，但我的问题是，我是否错过了一种本土化的方法。
我的页面上有页脚。我想显示一些文本，这是对齐在页脚。但我也希望文本中心垂直对齐。
当前的想法是在元素中添加一些填充，但是如果我决定以后使页脚可调整大小，这将破坏设计。还有一些其他CSS方法不使用本机Flexgrid选项。
另一个想法是在div中放置div (例如，任何元素)，然后将第一个对齐内容居中：中心第一个，对齐内容:flex，内部一个。这是可行的，但有点混乱。
然而，我想知道的是，我是否可以本机告诉Flexgrid将内容与右侧水平和垂直中心对齐呢？
浏览 3提问于2017-10-31得票数 1
回答已采纳
我有一个既包含图像又包含一些文本的容器。我想要的文本是垂直和水平居中的图像。
似乎最简单、最具前瞻性的方法是使用Flexbox和文本的绝对定位：
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.text {
position: absolute;
}
<div class='container'>
<div class='text'>
This should
浏览 5提问于2017-06-08得票数 9
回答已采纳
从一周以来，我一直在努力解决我的问题，我真的尝试了所有的方法！我有一个两列的布局(左:内容/右:内容描述)。我想要这个两栏的全高页面，我找到的唯一方法是：
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
在我的列中居中
浏览 0提问于2016-08-08得票数 0
3回答
尝试居中的div包含一些文本在一个非常简单的网站，我正在做。设法垂直居中，但不能水平居中：
#welcome-section{
border: 10px solid blue;/*temporary for control*/
display: block;
height: 100vh;/*U.S. 10 100% viewport height*/
width: 100vw;/*100% viewport width*/
background-color: red;
color: white;
}
.hellotext{
posit
浏览 0提问于2020-09-17得票数 1
我试图在不知道高度/宽度的情况下水平和垂直居中div。我已经在jquery中实现了它，但我正在努力将它转换为纯js，因为我不想要依赖关系。有什么想法吗？
<script>
$(document).ready(mt);
$(window).resize(mt);
function mt(){
var contentLocked = $('.lockerPopup').outerHeight();
marginTop = ( $(document).height() - contentLocked ) / 2;
浏览 0提问于2015-09-02得票数 0
2回答
我有2个图片在我的主页上，这是垂直居中。
#pgc-10-1-1.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
#pgc-10-3-0.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
但是，我希望它们在水平和垂直方向上都居中。
当我不使用float: none !important;时，图像水平居中，而不是垂直居中。当我使用f
浏览 3提问于2016-03-11得票数 0
3回答
我需要在div中水平和垂直地应用一些文本，这在之前发布在堆栈溢出上的解决方案中工作得很好-
text-align: center;
vertical-align: middle;
line-height: 90px;
/* the same as your div height */
我的问题是我有多行，并且我用以下命令将单词换行-
white-space: normal;
我的文本在一个按钮中，所以我需要这一行来抵消不允许文本正常换行的btn类。
然而，当我这样做时，我的90px的线条之间会有一个巨大的差距，正如你所预期的那样。有没有办法绕过这个问题？或者是另一种居中文本的方式？
浏览 19提问于2015-06-17得票数 2
1回答
我在一个移动网站上有一个简单的正方形SVG艺术元素。如何在纵向模式下水平居中，然后垂直居中？无论朝向和Safari&Chrome友好，基本上都是完美的中心匹配？？
有关于垂直居中的抨击。有没有一种简单而有效的方法来实现这一点？
浏览 1提问于2017-07-13得票数 0
1回答
我正在尝试垂直对齐我的登录屏幕。，并使用css
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}
我不会让我的项目垂直居中。我将无法实现它，因为我使用bootstrap类来水平居中。
浏览 0提问于2016-04-11得票数 7
回答已采纳
2回答
我正试图使这个对角线标题在页面中以水平和垂直的方式居中，我已经尝试过几种方法，包括这个方法，但是没有任何效果。
.houses {
transform: rotate(-45deg);
text-align: center;
letter-spacing: 5rem;
}
<body>
<h1 class="houses">HOUSES</h1>
</body>
浏览 12提问于2022-10-12得票数 -1
2回答
垂直居中竖排文本
、、
我有一些垂直的文本，我不能在他们的div中垂直居中。下面是一个例子：
请参见3个div (2个橙色和1个红色)。divs中的文本没有垂直居中，导致文本泄漏到div之外。
我已经用vertical-align: middle试过了，但是什么也做不了。
如何在div中垂直居中竖排文本？
浏览 5提问于2013-10-08得票数 3
1回答
居中模式窗口
、、、
我想将此日期选择器居中，以使其在移动设备上更易于使用，但我无法使其正常工作。我目前正在尝试这种方法：
.picker {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
}
...but不走运。它在水平方向上居中，但并不正确，并且模式会随窗口大小而缩放。在垂直方向上，它根本没有居中。
我也试过用jQuery把它居中，但我也不能正常工作。
小提琴：
浏览 0提问于2015-04-28得票数 0
我正在使用这个脚本水平和垂直居中我的div。
当页面加载时，div会垂直居中，而不是水平居中，直到我调整浏览器的大小。
我做错了什么？
$(document).ready(function (){
$(window).resize(function (){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
浏览 5提问于2012-12-17得票数 36
回答已采纳
我和contentMode UIViewContentModeScaleAspectFit有一台imageView。因此，它可以在不更改纵横比的情况下调整图像大小。但是图像视图中的图像是水平和垂直居中的。
我不想让它垂直居中。如何将此图像移动到imageview的上端？
浏览 4提问于2010-12-20得票数 0
1回答
我需要显示一个水平居中的图像，并垂直重复它以覆盖屏幕的高度。 我试着这样做： Center(
child: Image.asset('test.png', repeat: ImageRepeat.repeatY),
) 但我得到的是一个没有重复的水平和垂直居中的图像。
浏览 45提问于2020-01-12得票数 0
回答已采纳
我有这样的结构(简化)：
<div id="outer" style="display: table-cell">
<div id ="someOtherDiv">.......</div>
<div id="inner" style="text-align: center; vertical-align: middle">
<img src="path" />
</div>
</div>
我需要
浏览 1提问于2018-09-14得票数 0
2回答
我有这样的东西：
<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p>
显然，正如您在这里看到的，我的意图是将跨度居中(水平和垂直)。文本水平居中很好，但是为什么垂直居中不起作用呢？这是怎么回事？
谢谢
浏览 2提问于2012-03-16得票数 3
回答已采纳
我需要创建一个可点击的div，其中包含一个在div中水平和垂直居中的图像(大小可变，但比div小)。
我将div设置为可点击
#image-box a { display: block; height: 100%; width: 100%; }
但似乎不能垂直居中图像。
浏览 1提问于2011-06-21得票数 0
回答已采纳
我试图在没有绝对定位的情况下在div中对图像进行居中，因为图像溢出到页面上的任何其他div上。例如，在容器div上方有一个div，它将包含按钮，但是图像正在溢出。有没有办法在没有绝对定位的情况下对图像进行居中？
更多的信息-我用的是电子。该图像实际上是一个base64编码的图像，它是从画布(canvas.toDataURL())中提取的，并使用IPC发送到主进程。在此之后，窗口的位置将更改为另一个html文件，当新页面完全加载时，将通过IPC发送请求以再次接收图像。然后将图像插入到页面上的img标记中。
$(document).ready(function() {
ipcRendere
浏览 2提问于2016-06-29得票数 0
回答已采纳
1回答
JQM:中间/对齐图标
、、、、
我需要一个200 pxx200px按钮大小，图标在中心(水平和垂直)。我可以创建200 px200 my大小，并使用我的个人图标。
我的问题是：！
如何在按钮中水平和垂直地对图标进行居中？
如果有人能帮我，我会很感激的。
干杯,
蒂莫
浏览 4提问于2012-08-04得票数 0
我想让div始终水平和垂直居中。
我可以减小/增加窗口的宽度，div将始终保持在窗口的中心
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
这是我目前所拥有的。但是我也想让div保持垂直居中，所以如果我减少/增加窗口的高度，div会以停留在窗口中间来响应。
关于这个例子，我想让黑盒在调整窗口大小时保持垂直居中，就像它总是水平居中一样。
浏览 1提问于2013-07-08得票数 17
回答已采纳
我正在尝试建立一个具有以下想法的flexbox菜单:项目之间的空间，等高，居中的文本(水平和垂直)。
ul {
display: flex;
justify-content: space-between;
flex-direction: row;
justify-content: center;
}
li {
width: 32.25%;
align-items: center;
}
span {
text-align: center;
display: block;
height: 100%;
}
<ul>
<li>&l
浏览 3提问于2017-02-17得票数 0
我有两个项目:一个日历组件和一个按钮。它们的高度/宽度不同。
如何使它们在水平和垂直方向上居中？
桌子？Div？...
我认为每个物体都有50%的面积，并以此为中心。然而，我可能会对水平居中(彼此之间有一个间隙)持开放态度。然后将它们作为一对垂直居中。
浏览 0提问于2012-11-15得票数 1
回答已采纳
我用一个中心小部件包装了我的列小部件。但我的列只是水平居中，而不是垂直居中。我怎样才能让它在水平和垂直的中心？
代码：
body: Center(
child: Column(
children: [
Text(
'IMPOS?',
style: TextStyle(
color: Colors.red[600],
),
),
Text(
'IMPOS?',
style:
浏览 45提问于2021-05-13得票数 0
回答已采纳
我尝试在满足以下条件的情况下居中元素(水平和垂直)：元素的显示是内联-块，因为我希望根据其内容计算其宽度/高度。
当容器大于元素时。
然而，当元素大于容器和时，问题就开始了。
提前谢谢你，奥伦
以防jsFiddle宕机，下面是代码片段：
<div class="working_area">
<div class="image_container">
<img src="http://eofdreams.com/data_images/dreams/bear/bear-05.jpg"/>
浏览 0提问于2013-07-21得票数 5
我遇到了一些问题，试图用CSS对body元素进行居中。我希望它是居中的水平和垂直在页面上。问题是，它现在是怎么写的，它会把文本集中在短消息(即三个单词以下)上，但更长的信息却把它搞砸了。
这是我的CSS：(这是Sinatra的一个erb文件，但我不认为这会影响CSS的解释方式)
body {
background: white;
/*TODO: still not perfect; changes based on length of message */
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px
浏览 4提问于2017-02-13得票数 0
回答已采纳
我搜索了堆栈溢出，但不幸的是没有找到这个特殊情况的解决方案。
我试图显示以下场景：
，容器视图，在容器视图中以水平和垂直方式居中的文本，该文本位于以该为中心的文本下面。
无论我尝试什么，我都不能在容器视图中水平和垂直地对文本进行居中，并在其下面放置一些东西，而不将其从容器视图的中心移出。
为了更好地理解，我在故事板上描述了这种行为：
如果有人能帮我用SwiftUI！：编写这个场景，那就太好了。)
浏览 0提问于2020-04-15得票数 8
回答已采纳
我有以下代码
HTML
<a href="#" class="col-inner">
<img src="http://placehold.it/450x450" />
<div class="content">
<h3>Hello World</h3>
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</a>
CSS
img{
max-width: 100%;
he
浏览 0提问于2017-02-08得票数 0
我想中心的所有内容在页脚在id="footer-content"下始终水平和垂直中心独立于页脚大小和标签计数。如果更改页脚大小或添加/删除某些标记，页脚内容必须保持中心水平和垂直。
#footer {
min-height: 100px;
height: 100%;
background-color: #f5f5f5;
text-align: center;
vertical-align: middle;
border-style: dashed;
}
<footer id="
浏览 3提问于2016-06-02得票数 0
回答已采纳
3回答
在安卓系统中，如何对TextView的文本进行水平和垂直的居中？如何将TextView的对齐对齐？
浏览 11提问于2014-02-21得票数 0
回答已采纳
3回答
我想垂直和水平居中的一些文本在一个div，其中包含旁边的图像。到目前为止，我只让它以水平为中心，而让它以垂直为中心是很麻烦的。我知道有很多这样的帖子，提到了一些绝对的定位，但每次我尝试的时候，一切都是重叠的。
这是jsfiddle：
如果水平扩展结果屏幕，使所有内容都在同一行(基线)上，您将看到文本不是垂直居中的。
下面是我的css的代码：
#titleheader{
margin:auto;
text-align: center;
padding:100px;
background:#f2f2f2;
}
#titleheader > h1 {
paddi
浏览 1提问于2015-07-08得票数 0
我想在这个网格中垂直居中对齐按钮。我尝试过垂直对齐，但没有效果。我可以使用top: "30%"调整按钮的垂直位置，但我不认为这是使按钮居中的最好方法。
<form className={classes.container} noValidate autoComplete="off">
<Grid container spacing={1}>
<Grid item xs={5}>
<TextField
id="standard-name"
l
浏览 2提问于2020-06-16得票数 0
我想显示一个图像左对齐(在左/右有一些填充)，但垂直居中的表格单元格，同时保持文本的水平和垂直居中。
JSFiddle完整示例：
<tr>
<td>
<img title="Out of stock" src="..."><!-- This image may or may not exist -->
<a href="">4000.4</a>
</td>
<td>Lemon soda</td>
<t
浏览 2提问于2021-11-20得票数 0
回答已采纳
2回答
我正在尝试居中文本(水平和垂直)，我在这方面有一点困难。
这就是我尝试过的，但它只是水平居中，而不是垂直居中。
如何将此文本置于中心位置？
<div class="playerDetailsPage">
<p>
<h4>The text will be in the center</h4>
</p>
</div>
css
.playerDetailsPage {
background-color
浏览 0提问于2014-05-29得票数 3
回答已采纳
如果文本恰好换行，是否可以将内容(图标+文本)在容器中水平和垂直居中？似乎CSS引擎没有计算出换行文本的可见宽度，并且我当前的解决方案不起作用……请看这个
html：
<a href=# class="box">
<span class="icon"></span>
<span class="text">How can I center when_it_wrapped?</span>
</a>
css：
* { box-sizing: border-
浏览 6提问于2017-06-30得票数 1
我不想将div居中，我希望div的内容居中。我想要水平和垂直对齐。
很抱歉，如果这太简单了，或者其他什么，但是这是一种麻烦，让它正确的。
格雷
我正在使用IE7
浏览 0提问于2010-12-21得票数 3
2回答
我试图在CSS中创建大致类似于以下内容的内容：
其中，+2在圆圈中以水平和垂直方向居中，而DEX则在+2下面水平地居中。
我怎样才能做到这一点？
浏览 1提问于2017-08-08得票数 2
回答已采纳
如何使用CSS使加号在圆圈内水平和垂直居中？下面是我的代码： #container {
font-size: 20px;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid black;
line-height: 16px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: bor
浏览 605提问于2015-11-18得票数 16
回答已采纳
我的程序必须在PDF Acrofield上做一些样式。其中之一是将文本在多行文本域(而不是富文本域)中水平和垂直居中。我设法用下面的代码将它水平居中： var centeredField = stamper.AcroFields.GetFieldItem(field.Name);
centeredField.GetWidget(0).Put(PdfName.Q, new PdfNumber(PdfFormField.Q_CENTER)); 但是我找不到任何方法使文本垂直居中。任何帮助都是非常感谢的。
浏览 226提问于2019-05-08得票数 0
回答已采纳
2回答
我尝试在chrome和safari中水平和垂直居中选择框。
这是jsfiddle - [http://jsfiddle.net/xeqLsdo6/]
问题是，即使在firefox中，文本在Chrome和Safari中也不是垂直对齐的。
提前谢谢你。
浏览 3提问于2015-05-26得票数 0
1回答
我是Echo 2框架的新手。我认为它应该很简单，但我发现没有办法将生成的内容水平和垂直居中。有没有可能得到一个具有固定宽度和高度的居中ContentPane (或类似的东西)？
thx，André
浏览 6提问于2008-09-30得票数 2
回答已采纳
1回答
我试着居中(水平和垂直)并堆叠两个社交按钮，但它不起作用。我做错了什么？
<ion-content padding>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-col>
<button ion-button icon-left outline color="fb" (click)="fbClicked($event)">
<ion-icon name="
浏览 1提问于2017-04-05得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
