开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使窗体在容器中居中？使用flex

使用flex布局可以使窗体在容器中居中。具体步骤如下：

在容器的CSS样式中，设置display为flex，将容器设置为弹性布局。
设置justify-content为center，将子元素在主轴上居中对齐。
设置align-items为center，将子元素在交叉轴上居中对齐。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度，使容器充满整个屏幕 */
}

.form {
  /* 窗体的样式 */
}
</style>
</head>
<body>
<div class="container">
  <div class="form">
    <!-- 窗体内容 -->
  </div>
</div>
</body>
</html>

在上述示例中，通过设置容器的高度为视口高度（100vh），使容器充满整个屏幕。然后，通过flex布局将窗体内容在容器中居中显示。这样，无论容器的大小如何变化，窗体都会保持居中显示。

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

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

有帮助

没帮助

相关·内容

【前端攻略】最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。由简至繁：行内元素的水平居中要实现行内元素（、等）的水平居中，只需把行内元素包裹在块级父层元素（

等）中，并且在父层元素CSS设置如

04

动画 | 一文掌握 Flex 布局

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

04

再不学 flex 就不会写布局了

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

03

Flex快速上手

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

02

前端小白进阶之路-技巧篇（垂直水平居中）

在前端布局中居中方式可以说是家常便饭，几乎所有地方都需要用到他，我们常见的就是水平居中和垂直居中。今天小编带大家就看看常用到的这些居中方式都有哪些实现方式。

00

【面试题解】CSS布局，定位布局，浮动布局，BFC,IFC,FFC,GFC

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

03

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

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

01

Web前端学习第2章网页重构15 flex布局

此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，本节我们一起学习弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。

02

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

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

01

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

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

02

【融职培训】Web前端学习第2章网页重构15 flex布局

此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，本节我们一起学习弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。

01

弹性（Flex）布局的使用

最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少。

01

详解CSS Flexbox，附带示例

英文 | https://medium.com/javascript-in-plain-english/css-flexbox-explained-with-examples-85efa38e4770

01

css3 flex布局的使用图片文字垂直居中排列图文混排垂直居中 display:flex「建议收藏」

在实际工作的过程中经常遇到图片文字的混排，需要图片与一段文字垂直居中，这个实现方法以前一直非常复杂，而flex是解决这个问题比较好的办法；

02

建议收藏！总结了 42 种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

建议收藏！总结了42种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

超详细的Java容器、面板及四大布局管理器应用讲解！

之前在进行Java的窗体开发时经常会把容器、面板与布局管理混淆，从而不能正确的使用这三种属性对窗体应用进行布局。所以今天在这里记录一下Java窗体中容器、面板及常见的四大布局管理器的用法。

01

flex大法：一网打尽所有常见布局

flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局。

01

CSS进阶-Flexbox高级布局技巧

Flexbox（Flexible Box Layout Module）是CSS3引入的一种强大而灵活的布局模式，它彻底改变了我们对网页布局的处理方式，尤其是在响应式设计和复杂的多列布局中。然而，尽管Flexbox非常强大，但在实际应用中，开发者仍会遇到一些常见问题和易错点。本文旨在深入浅出地介绍Flexbox的一些高级布局技巧，分析常见问题及其解决方案，并通过代码示例加以说明，帮助你更高效地掌握Flexbox布局的艺术。

01

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

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

07

CSS十问之元素居中

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

01

利用flex实现元素水平垂直居中[通俗易懂]

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

03

水平垂直居中深入挖掘

在上篇文章 -- 一行 CSS 代码的魅力的最后，提到了两种快速实现水平垂直居中的方式。

02

前端学习(21)~css学习：如何让一个元素水平垂直居中?

如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。

01

移动web开发(3)之flex弹性布局

过去我们要在一个大盒子里面放三个这样的盒子,都是用的浮动,但是学习了弹性flex布局,我们可以更简单的做出来,为了凸显它的优势,用的还是行内元素span,只要用了flex,行内元素也可以直接设置大小.

01

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

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

02

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

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

06

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

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

01

老板的手机收到一个红包，为什么红包没居中？

如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。

02

HTML & CSS页面布局之定位

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

01

Flex弹性布局

取值：row(默认) | row-reverse | column | column-reverse

01

一次性把所有普通和经典的网页布局讲得通通透透的，多图预警，建议收藏

超干货长文预警。这次把网页布局方案讲得通通透透的，等高布局，水平垂直居中，经典的圣杯布局等等全都有了。建议收藏

01

CSS——实现元素的垂直居中

在写CSS的过程中，我常常谷歌一个东西，就是如何实现元素的垂直居中，水平居中难度还不是很大，但是垂直居中我这个烂记性是写一次忘一次，于是本着好记性不如烂笔头的想法，写下一篇博客记录下来。那么今天就记录下三种垂直居中的方法，各位看官按需使用。

03

flex 布局

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

02

CSS中的各种格式化上下文-FC（BFC、IFC、GFC、FFC）

FC是Formatting Context的缩写，中文名：格式化上下文。是 W3C在CSS2.1 规范中的一个概念。

01

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

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

02

详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）

当设置flex布局之后，子元素的float，clear，vertical-align属性将失效

03

CSS 居中

给父元素设置float，然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现

01

前端学习笔记—CSS

文本垂直操作：vertical-align的使用图示。middle设置居中。 vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。

01

flex布局总结

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

02

移动开发-Flex布局

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的

01

CSS弹性布局（Flex）详解

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

03

简单的聊一聊如何用CSS制作一个专业的头部页眉（Headers）

在本文中，我们将探索一些基本的技巧和提示，以帮助您使用CSS创建令人惊艳的页眉布局。我们并不过多关注设计，而是专注于创建布局，并了解创建布局时可能遇到的困难。

01

CSS实现居中效果

这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。

02

初识flex布局

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

01

一个前端开发对于Flex布局的总结（图解，简单易懂，全）

Flex布局是当下前端页面比较流行的布局之一，使垂直居中、水平居中变得尤为便捷。在日常开发中，经常可以用到，但是每次开发都要百度看一下它的一些属性细节，今天特地再进行一次系统的总结，这样以后自己就不用百度啦~~ 好的，下面开始~~~

02

[小技巧]巧妙使用flex, letter-spacing实现过渡动画

本文通过介绍如何利用flex和letter-spacing实现过渡动画效果，以及介绍一些实现动画的方式。同时，文章还讨论了如何利用flex实现居中效果，以及如何利用letter-spacing实现宽度改变时字母间距不变的效果。但是，文章也提到了一些缺陷，例如中文和英文的宽度不同，需要使用不同的letter-spacing值，以及动画时间不可控等问题。此外，文章还介绍了一种通过改变容器宽度来实现过渡动画的方法，但是这种方法也存在一些缺陷，例如需要使用will-change属性来减少paint范围等。总的来说，这篇文章提供了一些实现过渡动画效果的技巧，但是需要根据具体情况进行选择。"

07

移动web开发之flex布局（弹性布局）

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

03

React Native 系列(四) -- 布局

前言本系列是基于React Native版本号0.44.3写的。RN支持CSS中的布局属性，因此可以使用CSS布局属性，这里就不详细地讲解了，这篇文章的重点主要是讲述一下RN中的Flex布局。 CSS属性布局视图边框何时使用？想要设置自己周边有边框的时候注意点：一定要设置边框宽度 borderBottomWidth number 底部边框宽度 borderLeftWidth number 左边框宽度 borderRightWidth number 右边框宽度 borderTopWidth num

07

[小技巧]巧妙使用flex, letter-spacing实现过渡动画

有时候会做一些小的宽度变换, 比如居中到居左的变换, 例如上面的搜索的placeholder

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭