本文摘要：本文介绍了如何在CSS中通过设置宽高相等创建正方形，并利用Flexbox布局实现内部元素（如数字）的水平和垂直居中对齐。通过自定义背景颜色、字体样式（包括颜色、粗细和大小）等属性，可以让数字在正方形中醒目且易于辨识。最后，在HTML中应用该CSS样式类，即可实现正方形内数字的完美展示，此方法简单实用，能有效提升网页设计中的数字表现力。

CSS

CSS是前端开发中必不可少的一部分，它可以让我们装饰网页的界面同时维持程序的精简。今天我们将介绍如何在CSS中建立一个四方形，并在其中插入数字。

.square {
width: 100px;
height: 100px;
background-color: #00bfff; 
/* 这里的色彩可以自己设定 */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
font-size: 50px;
}

如上所示，我们可以通过配置宽高相等的尺寸来建立一个四方形。为了在该四方形中插入数字，我们必须将其内部的元素中心对齐。我们使用了CSS的flexbox排版，通过配置display: flex、justify-content: center、align-items: center，使内部元素横向和垂直中心对齐。

接下来，我们所需要做的就是在四方形中插入数字。为了使数字更加突出，我们配置了它的字体加粗，并配置了较大的字号。如果你需要调整数字的大小，只需修改font-size的值即可。

<div class="square">1</div>

最后，在HTML中加入刚刚建立的.square类，我们就可以愉快地插入数字了。这是一种简单有效的方式来使数字在网页中更加突出、易于辨识。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

Flexbox布局：Flexbox（Flexible Box）布局是CSS3中的一种布局模型，它为复杂、灵活的网页布局提供了一种更加高效且响应式的设计方案。在本文语境中，通过设置`.square`元素的`display: flex;`属性开启Flex布局，并使用`justify-content: center;`和`align-items: center;`两个属性值将正方形内的数字元素水平与垂直居中对齐，使得无论容器大小如何变化，数字始终能保持在正方形中心位置。

CSS Grid：虽然文章并未直接提到CSS Grid，但作为现代前端开发中的另一种重要布局系统，在处理二维布局问题时与Flexbox相辅相成。CSS Grid是一种基于网格系统的布局方法，可以更轻松地控制网页内容的行和列布局，而Flexbox更适合一维布局和项目对齐。在实际应用中，开发者可以根据具体需求选择适合的布局技术。

响应式设计：响应式设计是一种让网站或应用能够自动适应不同设备屏幕尺寸和方向的网页设计方法。虽然本文主要聚焦于创建一个带有数字的正方形并在其中运用Flexbox进行居中对齐，但在现代前端开发中，这种技巧常常会被应用于响应式布局场景下，确保无论用户是在桌面电脑、平板还是手机上浏览，数字都能在正方形内以美观且易读的方式展现出来。响应式设计的关键在于利用CSS媒体查询以及Flexbox或CSS Grid等布局技术，根据视口宽度动态调整页面元素的样式和布局。