如何将 div 中的输入居中

Question

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;
}

Answer 1

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

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

试一试

Answer 2

将此行添加到 #siteInfo 样式

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

如何将 div 中的输入居中

How do I center the input in div

html

css

centering