居中输入文本字段答案

【问题标题】：center the input text field居中输入文本字段
【发布时间】：2018-01-06 09:55:29
【问题描述】：

我有一个关于如何将我的输入文本框放在页面中心并做出响应的问题。

这是 HTML 代码：

<body>
        <div class="container container-padding50">
            <input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
    </div>
       <div class="message">
         <p>input anything you want search and press Enter</p>
         </div>
    <div class="js-container">      
         <!-- image shows here -->
    </div>

    <script src="javascript/main.js"></script>

</body>

我已经尝试过使用 CSS：

body {
    width: 80%;
    max-width: 1024px;
    margin: 0 auto;
}

.container-padding50 {
    padding-top: 50px;
    left:50%;
}

.container-textinput {
    text-aligen:center;
    width: 80%;
    /*display: relative;*/
    left: 50%;
    padding: 20px;
    font-size: 16px;
    font-family: Helvetica, sans-serif;
    border:none;
    border-bottom: 2px solid black;
}

我打算将我的输入字段设置为看起来很简单，因为只有“mySearchApp”的下划线，但我尝试使用left:50% 将其置于页面中间，有人能告诉我为什么这不工作？我在这里想念什么吗？

【问题讨论】：

标签： html css css-position centering

【解决方案1】：

为了使用left 属性，必须定位元素。

left CSS 属性参与指定定位元素的水平位置。它对非定位元素没有影响。

^{https://developer.mozilla.org/en-US/docs/Web/CSS/left}

试试这个：

body {
  width: 80%;
  max-width: 1024px;
  margin: 0 auto;
}

.container-padding50 {
  position: relative;              /* NEW */
  padding-top: 50px;
  height: 80px;                    /* NEW */
}

.container-textinput {
  position: absolute;              /* NEW */
  left: 50%;
  transform: translateX(-50%);     /* NEW; see note below */
  text-align: center;
  width: 80%;
  padding: 20px;
  font-size: 16px;
  font-family: Helvetica, sans-serif;
  border: none;
  border-bottom: 2px solid black;
}

<div class="container container-padding50">
  <input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
</div>
<div class="message">
  <p>input anything you want search and press Enter</p>
</div>
<div class="js-container">
  <!-- image shows here -->
</div>

居中时为什么要使用transform：

Element will not stay centered, especially when re-sizing screen

【讨论】：

感谢您的回答，现在我知道我在这里错过了位置值，还有一个问题，如果我要添加一个完整的窗口大小的画布动画背景，上面的所有 html 标签都重叠在上面，我应该把我的html标签中的所有位置值都放到relative中吗？