如何实现Div元素整体在屏幕居中，但其内部文本保持左对齐？

我来帮你搞定这个问题！你想要整个<div>元素在屏幕上垂直+水平居中，但内部的标签、输入框保持左对齐，对吧？

你当前的CSS里，align-items: center会让所有flex子元素（比如label、input）在水平方向上居中，text-align: center又会让文本居中，这就是为什么标签会跟着居中的原因。咱们调整一下样式就能实现需求：

修改后的CSS #

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向居中容器内的元素 */
  min-height: 100vh; /* 让容器占满整个屏幕高度，确保垂直居中生效 */
  margin: 0 auto; /* 让整个容器在页面水平居中 */
  max-width: 320px; /* 给容器设置一个合适的最大宽度，避免内容太宽 */
  text-align: left; /* 让内部文本/元素左对齐 */
  padding: 0 1rem; /* 可选：添加左右内边距，避免内容贴屏幕边缘 */
}

.input2 {
  margin-bottom: 1rem; /* 可选：给元素之间添加间距，更美观 */
}

完整的HTML结构 #

<div class='center-screen'>
 <label class='input2' for='pop'><b>Population proportion (p)</b></label>
 <input class='input2' type='number' step='0.01' id='pop' value='0.43'/>
 <label class='input2' for='samplesize'><b>Sample size (n)</b></label>
 <input class='input2' type='number' id='samplesize' value='40'/>
 <input class='input2' type='button' value='Calculate' />
</div>

关键调整说明 #

• 去掉了原来的align-items: center，改用margin: 0 auto让整个.center-screen容器在页面水平居中，而不是让内部元素居中
• 设置text-align: left强制内部文本左对齐
• 添加min-height: 100vh确保容器垂直占满屏幕，配合justify-content: center实现容器内元素的垂直居中
• 可选的max-width和padding是为了让页面在大屏幕上更美观，避免内容拉得太宽

这样调整后，整个Div会完美居中在屏幕上，而内部的「Sample size (n)」等标签都会保持左对齐啦！

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