css display：flex实现元素垂直居中

最新推荐文章于 2025-06-17 09:50:09 发布
最新推荐文章于 2025-06-17 09:50:09 发布
阅读量9.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/webZRH/article/details/81435027
本文介绍了一种使用Flex布局实现元素垂直居中的方法。通过设置display为flex，并使用justify-content和align-items属性来使子元素在父容器内水平及垂直居中。这种方式比传统的定位方法更为简洁且响应式友好。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在此之前元素垂直居中我使用的是绝对定位absolute或固定定位fixed

如何用flex实现元素垂直居中呢，父级包括子级

<div  class='itemBox'>

    <div>boxboxboxboxboxboxboxboxboxboxbox</div>

</div>

 

.itemBox{

display: flex;

justify-content: center;

align-items: center;

background: #588cfe;

width: 100%;

height: 100vh;

}

.itemBox div{

background: #ffffff;

width: 200px;

height: 200px;

word-break: break-all;//英文超出盒子不换行问题

}

3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
m0_73560798的博客
06-02 3488
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
前端CSS：CSS设置水平垂直居中的方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-28 1289
掌握了这些方法和技术后，你就可以在各种场景下灵活地实现元素的水平垂直居中。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，CSS Grid 是一种更为现代的布局方法，它同样可以用来实现元素的水平垂直居中。当需要居中多个元素时，可以将它们放在一个共同的容器中，并对该容器应用居中样式。Flexbox 是现代浏览器的一项强大特性，它可以轻松地实现元素的居中。
通过display:flex实现CSS垂直居中
qq_17749533的博客
10-29 1248
父元素添加 display: flex; 子元素添加 align-self: center 示例 <div class='father'> <div class='child'></div> </div> <style> .father { background: #ff6b89; height: 600px; width: 100px; dispal
React原理深度解析
最新发布
weixin_47002803的博客
06-17 585
当我们用 canvas 绘制动画时，每一帧绘制前都会调用 ctx.clearRect 清除上一帧的画面，如果当前帧画面计算量比较大，导致清除上一帧画面到绘制当前帧画面之间有较长间隙，就会出现白屏。为了解决这个问题，我们可以在内存中绘制当前帧动画，绘制完毕后直接用当前帧替换上一帧画面，由于省去了两帧替换间的计算时间，不会出现从白屏到出现画面的闪烁情况。FPSFramesPerSecond 指的画面每秒钟传输的帧数，60FPS指的是每秒钟60帧；然后我们更新了节点 A C B E。未使用fiber版本。
css样式flex布局之，盒子垂直居中
m0_61265297的博客
07-04 512
效果，一个盒子内的元素都居中。
display:flex 元素垂直居中，有间距，右对齐，gap属性
徐同保的专栏
08-30 3619
.m-design-header-action{display: flex;padding: 0 18px 0 0; align-items: center; width: 180px;gap: 8px;text-align: right;justify-content: flex-end;}
flex布局
yanzi_0216的博客
10-13 453
flex布局 一、布局 块级元素flex布局 display: flex; 内联元素flex布局 display: inline-flex; 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cros
display: flex水平居中垂直居中独占一行
08-24
若要实现一个元素在水平和垂直方向上都居中，并且这个元素独占一行，可以通过设置该元素的父容器使用`display: flex`属性，并且对该元素应用`justify-content: center`和`align-items: center`属性来实现水平和垂直...
使用display:flex将div垂直居中于页面
06-09
使用 `display: flex` 属性也可以实现将 div 垂直居中于页面。您可以将 div 的父元素设置为 `display:flex` 并使用 `align-items` 属性将其垂直居中。如下所示： ```css .parent { display: flex; align-items: ...
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 958
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
CSS技巧：完美实现内容垂直居中的方法
不同的元素类型可能需要采取不同的CSS技巧来实现垂直居中。 1. 单行文本垂直居中 对于单行文本，可以使用`line-height`属性来实现垂直居中。将容器的`height`属性和`line-height`属性设置成相同的值，就可以使得...
display：flex垂直居中
qq_38184559的博客
08-16 1万+
布局说明：1. 场次为一场比赛 　　　　　 2. 比赛双方是交战的两个队伍                3. 一场比赛可以有多种玩法，所以场的每个玩法的布局的高度都不确定。 主要说下我学到的垂直居中的flex。 1. 第一次尝试。 1 div class="parent"> 2 h1>我是通过flex的水平垂直居中噢h1> 3 h1>我是通过fl
css display:flex 上下左右居中
sayyy的专栏
02-17 589
略
【css】水平，垂直，居中 display:flex，flex-direction，justify-content，align-items,display:grid,grid-template-col
qq_45852108的博客
10-11 1301
【css】水平，垂直，居中 display:flex，flex-direction，justify-content，align-items,display:grid,grid-template-col
flex布局实现元素的垂直居中
kassiaaaa的博客
07-19 6663
转载：[转载自这里](https://blog.youkuaiyun.com/amberqu/article/details/79700974) 转 Flex实现元素的水平居中和垂直居中 ...
css样式display:flex display:grid
weixin_43843679的博客
08-21 517
使一个区域里的内容水平，垂直居中 /* display: flex; flex-direction: column; justify-content: center; align-items: center; */ 参考display：flex网页 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ...
常用的几种布局方式---Flex 布局(垂直居中展示）
热门推荐
weixin_64310738的博客
02-14 2万+
常用的几种布局方式---Flex 布局(垂直居中展示）
css flex文字上下左右居中
dwour的博客
01-03 495
css flex文字上下左右居中
用弹性盒子实现垂直居中及用css实现图片垂直居中
2302_79245293的博客
12-17 674
可以通过以下步骤：2、在容器内部的项目上应用来实现水平居中。
display: flex子元素垂直居中
09-06
使用display: flex可以实现子元素的垂直居中。你可以通过设置父元素的属性justify-content: center和align-items: center来实现。这样子元素就会在垂直方向上居中显示。另外一种方法是通过使用flex布局，设置子元素的属性height和line-height为相同的值。这样子元素的内容就会在垂直方向上居中显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [[CSS] CSS display:flex实现内容水平垂直居中展示](https://blog.youkuaiyun.com/taoshihan/article/details/125563223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [frontend-training：前端练习项目](https://download.youkuaiyun.com/download/weixin_42106357/15296317)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [css display：flex实现元素垂直居中](https://blog.youkuaiyun.com/webZRH/article/details/81435027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值