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

最新推荐文章于 2024-12-08 02:46:22 发布
原创 最新推荐文章于 2024-12-08 02:46:22 发布 · 9.3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种使用Flex布局实现元素垂直居中的方法。通过设置display为flex，并使用justify-content和align-items属性来使子元素在父容器内水平及垂直居中。这种方式比传统的定位方法更为简洁且响应式友好。

在此之前元素垂直居中我使用的是绝对定位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;//英文超出盒子不换行问题

}

告别J-Flash界面：用J-Link Commander实现NRF52840无人值守烧录（附Linux适配指南）
最新发布
weixin_33719619的博客
04-15 480
本文详细介绍了如何使用J-Link Commander实现NRF52840无人值守烧录，特别适用于量产环境。通过命令行和批处理脚本，显著提升烧录效率，并提供了Linux环境下的适配指南，包括驱动配置、并行烧录和错误处理机制，帮助开发者实现高效自动化生产。
css实现垂直居中的几种方式
康一夏忙中偷闲的日子
09-28 1万+
css布局 实现垂直居中的几种方式一、单行元素垂直居中二、对文本进行垂直居中三、对已知高度块级元素进行垂直居中四、对未知高度块级元素进行垂直居中 <div class="parent"> <div class="content">内容垂直居中</div> </div> 一、单行元素垂直居中 1、可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中 2、针对行内元素，可通过设置vertical-align: middl
CSS盒子居中的6种方法!
bukuaileya的博客
11-15 2万+
1.flex布局设置居中常见的一种方式就是使用flex布局设置居中。利用弹性布局(flex)，实现水平居中，其中justify-content用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式写在父元素上这就是定义了一个伸缩容器主轴对齐方式，默认是横轴纵轴对齐方式，默认是纵轴优点： 简单、方便、快速，三行代码搞定。
flex 布局
Daisy__xu的博客
04-20 1369
flex 基本概念 使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。 #dad { display: flex; justify-content: center; align-items: center }
flex布局属性详解&&基于flex的单元素，整体元素居中方法&&代码示例
invalid_oath的博客
12-19 4195
CSS-flex布局属性详解一. 基本属性以及代码示例1.父元素属性(1) 为父元素添加display 属性，值为flex(2) flex-direction 属性（改变子元素排列方式）(3) justify-content 属性（改变子元素沿主轴对齐方式）(4) align-items 属性（定义 flex 子元素沿交叉轴的对齐方式）(5) flex-wrap 属性（指定子元素换行方式）2.子元素属性(1) flex-shrink 属性（收缩子元素）(2) flex-grow 属性（增大子元素）(3) f
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 9045
css垂直水平居中方式
css补充2：flex布局，居中方案等
CYL_2021的博客
04-21 5534
一.flex 布局 1.1 flex布局原理 flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性” 1.2 flex布局父元素常见属性 1）flex-direction设置主轴方向（即项目的排列方向
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
CSS实现垂直居中的7种方法
c_x_m的博客
03-04 1万+
CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。 1、设定行高(line-height) HTML： <div class="parent"> <span class="child">你好</span> </div>
CSS3实现垂直居中的八种方式
追梦i赤子心的博客
01-13 4396
CSS3的8种垂直居中方式 方法/步骤1： 通过verticle-align:middle实现垂直居中 ​ 通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有 一点需要格外注意，vertical生效的前提是元素的display:inline-block。 方法/步骤2： 通过display:flex实现CSS垂直居中 随着越来越多浏览器兼容CSS中的flex...
常用的几种布局方式---Flex 布局(垂直居中展示）
weixin_64310738的博客
02-14 2万+
常用的几种布局方式---Flex 布局(垂直居中展示）
flex布局
yanzi_0216的博客
10-13 510
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将图片居中的方法
weixin_33948416的博客
06-09 3053
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局 注意：（Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。） 1.将图片水平方向居中： justify...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 17万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
CSS布局——水平垂直居中、等分布局、圣杯布局
2401_89284222的博客
12-08 1129
实现圣杯布局效果也可以采用flex布局，就是一个大盒子包含三个子盒子，左右两个盒子固定宽高，中间盒子设置flex：1（占据大盒子剩余空间）。而采用flex布局的元素叫做容器，在flex布局中的子元素被称为项目（即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目）；利用flex来居中布局是非常好的一种方式，几行代码就能优雅的实现元素水平垂直完美居中。本行分为四列，所以宽度为25%，padding-right是设置一个元素的右填充在此填充了10px，即每个子元素之间的空隙。
flex布局居中
weixin_35753291的博客
01-04 5797
要在 flex 布局中居中元素，可以使用 justify-content: center 和 align-items: center。 .container { display: flex; justify-content: center; align-items: center; } 这会使元素在容器中水平居中和垂直居中。 如果你只想要垂直居中，可以只使用 align-items:...
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
BADAO_LIUMANG_QIZHI的博客
03-23 3万+
场景 Flex是Flexible Box的缩写，意为”弹性布局”。 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列。 实现如下类似布局 最外层是是一个div,div里面是上面一个照片，下面一个表单，这两个元素居中排列。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、外层div设置样式 .login { display: flex; f...
CSS实现前端布局更巧妙的方案！在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局
Allen-
09-12 2769
在前端开发中，实现各种页面布局一直是一个常见的需求。传统的做法如使用和属性已经被广泛采用，但这种方法有时可能显得不够简洁或灵活。在适当的情况下直接使用margin进行布局是一种更优雅、简洁的替代方案，可以在 Flexbox 布局中有效地实现居中对齐和一些复杂的布局需求。掌握并运用这种方法，可以提高开发效率，并使布局更加优雅。
使用弹性布局（display：flex）实现元素的水平居中和垂直居中
Pumily的脱发历程
08-31 1万+
为了方便理解我附上具体一点的例子。
display: flex 和 justify-content: center 强大居中
naozibuok的博客
07-19 1485
你还在为居中而烦恼吗，水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它，display: flex 和 justify-content: center 都可以完成！display: flex：将元素定义为flex容器justify-content：定义项目在主轴上的对齐方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值