如何在 div 中居中输入 [重复]答案

【问题标题】：How do I center the input in div [duplicate]如何在 div 中居中输入 [重复]
【发布时间】：2022-01-16 06:39:56
【问题描述】：

http://jsfiddle.net/4konLwjp/15/ 我需要将输入集中在 div 中，输入总是向右浮动。有什么办法吗？ HTML：

<div id="siteInfo">
   <input value="Some Button" \>
</div>

CSS：

#siteInfo {
  padding: 5%;
  background: rgba(0,0,0,0.6);
  text-align : center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
input {
  margin: 0 auto;
padding:5%;
width: 300px;
display: inline-block;
}

【问题讨论】：

输入不能在你的siteInfo div中居中的原因是你设置输入为padding: 5%，输入不是边框，是内容框，内容框计算自身宽度时只包含真实内容，所以你应该改为border-box，它不仅包含真实内容，还包含padding、border

标签： html css centering

【解决方案1】：

在您的代码中，您可以在您的input 样式中添加box-sizing: border-box;，如下所示：

input {
  margin: 0 auto;
padding:5%;
box-sizing: border-box; // add this line
width: 300px;
display: inline-block;
}

试试看

【讨论】：

【解决方案2】：

将此行添加到#siteInfo 样式

display: flex;
align-items: center;
justify-content: center;

【讨论】：