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

Posted 2023-03-05

【中文标题】如何在 div 中居中输入 [重复]

【英文标题】：How do I center the input in div [duplicate]

【发布时间】：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

【参考方案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;