使用flex-basis:50%时如何让方块居中于fieldset下方？

数据老陈

2026-8-17

相框计算器方块居中问题解决

问题描述

我正在开发一个相框计算器，计算结果将显示在一个方块上。使用flex-basis: calc(50% - 10px);创建的方块尺寸符合预期，但方块在fieldset下方偏移至左侧。尝试通过<div class="content">添加CSS样式来居中却无效，相关代码片段如下，恳请指导如何实现方块在fieldset下方居中。

原CSS代码

fieldset {
  border: 1px solid rgb(255, 232, 57);
  width: 350px;
  margin: auto;
  display: flex;
  margin-bottom: 10px;
}

.content {
  margin: auto;
  padding: 10px;
  justify-content: center;
}

.square-container-single {
  display: flex;
  flex-wrap: wrap;
}

.square-single {
  position: relative;
  flex-basis: calc(50% - 10px);
  margin: 5px;
  margin-bottom: 40px;
  border: 5px solid;
  box-sizing: border-box;
  background-color: gray;
}

.square-single::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square-single .content-single {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  /* added for centered text */
  justify-content: right;
  /* added for centered text */
  align-items: top;
  /* added for centered text */
}

原HTML代码

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>I Was Framed - Calculator</title>

  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" type="text/css" href="form.css">
</head>

<body>
  <div class="content">
    <section>
      <form class="form-horizontal" action="index.html" onreset="resetOutput()" method="post">
        <fieldset>
          <legend>
            <center>
              <h2><b>Frame Width</b></h2>
            </center>
          </legend><br>
          <label for="frameWidth">Frame Width:&nbsp;&nbsp;</label>
          <input type="number" placeholder="Frame Width" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="frameWidth" id="frameWidth" style="width: 150px;" />&nbsp;&nbsp;
          <select name="frameWidthFraction" id="frameWidthFraction">
            <option value="0">0</option>
            <option value="0.0625">1/16</option>
            <option value="0.0125">1/8</option>
            <option value="0.1875">3/16</option>
            <option value="0.25">1/4</option>
            <option value="0.3125">5/16</option>
            <option value="0.375">3/8</option>
            <option value="0.4375">7/16</option>
            <option value="0.50">1/2</option>
            <option value="0.5625">9/16</option>
            <option value="0.625">5/8</option>
            <option value="0.6875">11/16</option>
            <option value="0.75">3/4</option>
            <option value="0.8125">3/16</option>
            <option value="0.875">7/8</option>
            <option value="0.9375">15/16</option>
          </select>
        </fieldset>
      </form>
    </section>
    <div class="square-container-single">
      <div class="square-single">
        <div class="content-single">
          <span><div id="width"></div>
                    <div class="content-single spread">
                  <div id="height"></div>
                </div>
                    
                    </span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

解决方法

问题核心在于两个布局设置缺失：

.content未设置为flex容器，导致justify-content属性无效
.square-container-single作为flex容器，默认justify-content: flex-start，使方块靠左排列

以下是修改后的完整代码：

修改后的CSS代码

fieldset {
  border: 1px solid rgb(255, 232, 57);
  width: 350px;
  margin: auto;
  display: flex;
  margin-bottom: 10px;
  /* 优化内部元素垂直居中，增加间距 */
  align-items: center;
  gap: 8px;
}

.content {
  margin: auto;
  padding: 10px;
  /* 设置为flex容器，垂直排列子元素并居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.square-container-single {
  display: flex;
  flex-wrap: wrap;
  /* 让方块在容器内水平居中 */
  justify-content: center;
  /* 可选：限制容器宽度与fieldset对齐 */
  width: 350px;
}

.square-single {
  position: relative;
  flex-basis: calc(50% - 10px);
  margin: 5px;
  margin-bottom: 40px;
  border: 5px solid;
  box-sizing: border-box;
  background-color: gray;
}

.square-single::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square-single .content-single {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* 改为flex容器实现文本布局 */
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

优化后的HTML代码

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>I Was Framed - Calculator</title>

  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" type="text/css" href="form.css">
  <style>
    /* 用CSS替代过时的<center>标签 */
    legend h2 {
      text-align: center;
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="content">
    <section>
      <form class="form-horizontal" action="index.html" onreset="resetOutput()" method="post">
        <fieldset>
          <legend>
            <h2><b>Frame Width</b></h2>
          </legend>
          <label for="frameWidth">Frame Width:</label>
          <input type="number" placeholder="Frame Width" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="frameWidth" id="frameWidth" style="width: 150px;" />
          <select name="frameWidthFraction" id="frameWidthFraction">
            <option value="0">0</option>
            <option value="0.0625">1/16</option>
            <option value="0.125">1/8</option>
            <!-- 修正原代码中1/8的value错误 -->
            <option value="0.1875">3/16</option>
            <option value="0.25">1/4</option>
            <option value="0.3125">5/16</option>
            <option value="0.375">3/8</option>
            <option value="0.4375">7/16</option>
            <option value="0.50">1/2</option>
            <option value="0.5625">9/16</option>
            <option value="0.625">5/8</option>
            <option value="0.6875">11/16</option>
            <option value="0.75">3/4</option>
            <option value="0.8125">13/16</option>
            <!-- 修正原代码中此处的文字错误 -->
            <option value="0.875">7/8</option>
            <option value="0.9375">15/16</option>
          </select>
        </fieldset>
      </form>
    </section>
    <div class="square-container-single">
      <div class="square-single">
        <div class="content-single">
          <div>
            <div id="width"></div>
            <div id="height"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

关键修改说明

给.content添加display: flex和flex-direction: column，让内部元素垂直排列，并通过align-items: center实现整体水平居中
给.square-container-single添加justify-content: center，确保方块在容器内水平居中
修正了原HTML中下拉选项的两处错误（1/8的value值、13/16的文字描述）
用CSS替代了过时的<center>标签，同时优化了fieldset内部元素的排版

内容的提问来源于stack exchange，提问作者Pyli

使用flex-basis:50%时如何让方块居中于fieldset下方？

问题描述 #

原CSS代码 #

原HTML代码 #

解决方法 #

修改后的CSS代码 #

优化后的HTML代码 #

关键修改说明 #