Question

页面中间是我需要文本框的地方

Answer 1

水平加垂直中心很麻烦。

首先将您的父母display: flex设为水平居中

，并包括两个包围flex: 1的包围式子项以及您居中的元素（这使它成为理想的第三个子项，如果您希望使其变大，请删除flex: 1作为中心子项并以百分比代替宽度（像素有效，但不会缩放）

然后通过添加边距顶部垂直居中，在此处计算剩余尺寸：

    .centeredchild {
      background-color: red;
      height: 20px;
      flex: 1;
      text-align: center;
      margin-top: calc(50vh - 10px);
     }

     .centeringaid {
       flex: 1;
     }

     .parent {
       width: 100%;
       height: 100vh;
       display: flex;
       background-color: lightblue;
     }

    <div class="parent">
    <div class="centeringaid"></div>
    <div class="centeredchild">hi</div>
    <div class="centeringaid"></div>
</div>

还有更常见的方法：https://www.w3schools.com/howto/howto_css_center-vertical.asp

顺便说一下，这个网站充满了有用的花絮。

Answer 2

您使用以下代码：

CSS：

protected override void OnDestroy()
{
    base.OnDestroy();
    spinnerMailingCountry.ItemSelected -= new EventHandler<AdapterView.ItemSelectedEventArgs>(CountrySpinner_ItemSelected);
    spinnerMailingState.ItemSelected -= new EventHandler<AdapterView.ItemSelectedEventArgs>(StateSpinner_ItemSelected);
    spinnerMailingCity.ItemSelected -= new EventHandler<AdapterView.ItemSelectedEventArgs>(CitySpinner_ItemSelected);
}

HTML：

.outercontainer { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.innercontainer {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Answer 3

请参考下面的代码片段，以在页面中间对齐多个文本框。（考虑页面高度为400像素）

.main-div { 
  height: 400px;
  position: relative;
}

.sub-div {
 -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

input[type="text"] {
    margin:10px auto;
    border: 1px solid gray;
}

<div class="main-div">
  <div class="sub-div">
    <input type="text" />
    <input type="text" />
    <input type="text" />
  </div>
</div>

如何在HTML中居中放置多个文本框

3 个答案: