开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

3个DIVs，1个容器，水平居中对齐

在前端开发中，实现3个DIVs水平居中对齐的方法有多种。以下是其中一种常用的方法：

使用Flexbox布局： Flexbox是一种强大的CSS布局模型，可以轻松实现元素的水平居中对齐。首先，创建一个容器元素，并将其设置为Flex布局。然后，将3个DIV元素作为容器的子元素，并使用Flex属性来控制它们的布局。

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

推荐的腾讯云相关产品：腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

使用文本居中对齐：另一种方法是使用文本居中对齐的技巧。将容器元素设置为块级元素，并将其内部的DIV元素设置为行内块级元素。然后，将容器元素的文本对齐方式设置为居中。

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  text-align: center; /* 水平居中对齐 */
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

推荐的腾讯云相关产品：腾讯云轻量应用服务器（Lighthouse）产品介绍链接地址：https://cloud.tencent.com/product/lighthouse

使用绝对定位和负边距：这种方法使用绝对定位和负边距来实现水平居中对齐。首先，将容器元素设置为相对定位。然后，将3个DIV元素设置为绝对定位，并使用负边距将它们水平居中对齐。

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

推荐的腾讯云相关产品：腾讯云云函数（SCF）产品介绍链接地址：https://cloud.tencent.com/product/scf

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端知识复习（一）

span不可以，img和video可以 span 属于行内非替换元素不能设置宽高，img, video 属于行内替换元素，可以设置宽高

02

android:layout_gravity和android:gravity的区别

1.首先来看看android:layout_gravity和android:gravity的使用区别。

02

这次带大家彻底搞懂 flex 布局

flex 布局，即弹性布局，是前端开发中非常常用的布局方式。主要是馋它很简单就能让容器内元素水平垂直居中的能力。

02

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

绝对定位不能通过设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;

04

Flex快速上手

Flex之于 CSS3 就如Promise之于 ES6，都解决了开发者的痛点问题，大大提高了生产力。借助Flex，可以轻松实现栅栏布局、水平/垂直居中、自定义排列方向和顺序等等需求。

02

动画 | 一文掌握 Flex 布局

网页布局，是前端入门的时候必学、必须熟练的一门技术，学到什么程度算是入门了呢？随便给你一个网站，你就可能快速的分析出网页的结构，然后搭建出模型，这是前端网页布局入门的最基本要求。

04

Android layout属性之gravity和layout_gravity「建议收藏」

gravity是控制其内容或者包含的views在该view（或view group）中的位置

02

轻松掌握RelativeLayout相对布局

在前面三期中我们对LinearLayout进行了详细的解析，LinearLayout也是我们用的比较多的一个布局。但在实际开发中使用LinearLayout远远不够，我们本期一起来学习RelativeLayout。一、认识RelativeLayout RelativeLayout，又叫相对布局，使用<RelativeLayout>标签。相对布局通常有两种形式，一种是相对于容器而言的，一种是相对于控件而言的。下表显示了RelativeLayout支持的常用XML属性及相关方法的说明

07

居中那些事情

可以知道，让一个元素水平居中可以使内容是inline或inline-block 非文本场景下，其实padding也可以实现相同效果。这个可以根据内容自适应，不然这样一来外层容器宽度就不固定了。

03

HarmonyOS-UIAbitity-枚举说明——【坚果派-红目香薰】

01

一篇文章带你了解CSS对齐方式

当使用 position对齐元素时, 总是定义 margin 和 padding 为 <body> 元素. 这是为了避免不同浏览器的视觉差异。

01

居中那些事情

居中那点事最近碰到一些居中的问题需要处理，这里整理下碰到的问题以及一些解决的方案文本水平居中 text-align:center; 可以知道，让一个元素水平居中可以使内容是inline或inlin

三、我的/登录栏制作《仿淘票票系统前后端完全制作（除支付外）》

我的页分为登录、注册、我的，如果登录了那么就显示我的页面否则显示登录页。登录页：

03

flex布局总结

一、定义及思想定义：弹性布局盒模型思想：给予容器控制内部元素高度和宽度的能力二、兼容性移动端可以使用注意加上前缀 display: -webkit-box; display: -moz-

02

微信小程序文字水平居中对齐问题

如果微信小程序开发刚入门，每一种居中方式都可以复制进去WXSS试一下，总有一款适合自己的。

02

前端CSS Flex布局8大重难点知识，收藏起来吧

Flex 布局将成为未来布局的首选方案。这也是学习前端必须掌握的主流布局方案！今天给大家分享一下 Flex 布局的 8 大重难点知识。

01

不定宽高div水平垂直居中(兼容ie6)

不定宽高div水平垂直居中解决方法有很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。

04

再不学 flex 就不会写布局了

块状元素居中是一个老生常谈的话题，之前面试的时候考官也曾问到过这个。下面写几种常见的块状元素居中的方式。

03

Flutter中Text与Container 组件

https://api.flutter.dev/flutter/painting/TextStyle-class.html

01

前端入门5-CSS弹性布局flex声明正文-弹性布局flex

作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。

02

【OpenHarmony】OpenHarmony 开发基础 ③ ( @State 注解修饰变量 | Row 布局 | OpenHarmony 的 Length 属性值 | Column 布局 )

在上一篇博客【OpenHarmony】OpenHarmony 开发基础 ② ( DevEco Studio 常用工具 | 参考文档 | 预览器 | 检查器 | 项目文件结构 | Index.ets 首界面 ) 中 , 分析了部分 index.ets 代码的内容 ,

01

如何让高度、宽度不定的容器保持水平、垂直居中

这个题目似乎解决的办法很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面，第一解决左右居中的问题，第二解决上下居中的问题。

02

【Java AWT 图形界面编程】LayoutManager 布局管理器 ② ( FlowLayout 流式布局 )

如 : 下面的布局就是从左向右的流式布局 , 将 6 个组件放在 FlowLayout 流式布局中 , 1 , 2 , 3 组件放入后 , 再放入 4 组件 , 发现第 1 排位置不够了 , 遇到障碍 , 此时折返回左侧 , 另起一行 , 在第 2 排继续从左到右排列 ;

02

第212天：15种CSS居中的方式，最全了

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

01

html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法

※ flex-direction:column-reverse (与column 相反)

03

div内图片和文字水平垂直居中「建议收藏」

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强，出错率低的方法。inline-block裸标签对齐法，以及透明图片拉伸对齐法。 css是如此的精深，我相信后来人会有更加绝妙的方法。但是，本文提供的几种实现图片垂直居中方法，一定是目前最实用的几种方法。

02

【基础】这15种CSS居中的方式，你都用过哪几种？

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

07

Flutter中 Text 与 Container 组件

https://api.flutter.dev/flutter/painting/TextStyle-class.html

02

CSS十问之元素居中

大家好，我是柒八九。从今天起，我们又重新开辟了一个新的领域：CSS串讲。(毕竟在Web 领域，CSS也是有举足轻重的作用)在该系列文章中，我们会一起学习「元素居中」、「层叠上下文」还有一些在面试中比较常见的问题及一些在工作中遇到比较好玩的点。

01

CSS上下左右居中

关键是利用transform百分比相对自身宽高计算的特性，如果环境不支持transform的话，就需要用一些比较老，但很精妙的技巧了

03

ArkUi介绍Column&Row组件的使用

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。

01

flex 布局

CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局，它具有很强大的功能，可以很轻松实现很多复杂布局。可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性

02

2014-10-25Android学习------布局处理(-)

我学习Android都是结合源代码去学习，这样比较直观，非常清楚的看清效果，觉得很好，今天的学习源码是网上找的个HealthFood 源码百度搜就知道很多下载的地方

04

《iVX 高仿美团APP制作移动端完整项目》08 会员页标题、会员卡制作

由此可知，我们只需要创建一个列，在这个列中创建一个图片以及一个文本即可完成单个种类的制作。首先创建一个行容器，命名为分类：

01

css常规水平居中&&垂直居中方案

无论水平居中还是垂直居中相信你并不陌生，但有多少种实现方式，每种的优劣以及兼容性相信你并不清楚。

02

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。

02

flex.css

.flex { display: -webkit-box; display: -webkit-flex; display: flex; }

03

弹性布局（伸缩布局）

弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。使用方法：父元素设置display:flex

02

两种对齐方式，layout_gravity和gravity大不同

上一期我们一起学习了LinearLayout线性布局的方向、填充模型和权重，本期来一起学习LinearLayout线性布局的对齐。一、LinearLayout对齐 gravity控制组件的重心，也叫对齐方式，表示view横向和纵向的停靠位置。主要通过以下两个属性来控制。 android:gravity：是对view组件本身来说的，是用来设置组件本身的内容应该显示在组件的什么位置，默认值是左侧。 android:layout_gravity：是相对于包含该元素的父元素来说的，设置该元素在父元素

09

鸿蒙HarmonyOS应用开发-Column&Row组件

一个丰富的页面需要很多组件组成，那么，我们如何才能让这些组件有条不紊地在页面上布局呢？这就需要借助容器组件来实现。

01

微信小程序|flexbox layout—快速实现基本布局

flexbox layout——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便，但对页面比较复杂的来讲就很繁琐了。所以使用flexbox layout对小程序页面内容进行整体封装布局，这样既方便又快捷。那么如何使用弹性盒子快速实现小程序的基本布局呢？

03

微信小程序之 flex 布局最详细讲解！！！

flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何容器都可以指定为 flex 布局

06

CSS实现两端对齐效果

CSS实现两端对齐效果两端对齐，从概念上来说，其实不难理解。如果不明白什么叫两端对齐，可以玩玩word等办公软件。下面谈谈如何实现文本的两端对齐。我所知道的大概有以下几种方法textalign

02

高度不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。

02

HTML & CSS页面布局之定位

默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。

01

初识flex布局

弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。使用方法：父元素设置display:flex

01

【CSS】盒子模型外边距 ② ( 盒子模型水平居中 | 盒子内文字、行内元素、行内块元素居中对齐 )

如果要将一个块级元素的盒子模型设置为水平居中样式 , 需要设置以下两项 :

02

CSS实用技巧（中）

我们经常使用CSS，但是却不怎么了解CSS，本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结，从本文中，你将了解到以下内容：

04

【布局技巧】Flex 布局下居中溢出滚动截断问题

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样：

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭