Question

我正在尝试将一个简单的div居中，但我失败了。我没有尝试任何方法，包括此处有关堆栈溢出的许多示例。这是我的CSS（的主要部分）：

body {
      min-height: 640px;
      background: #282a36;
      color: #bcc3cd;
      font-size: 12px;
      margin: 0;
      font-family: 'Source Sans Pro', sans-serif;
    }
    #nickbox {
      border: 1px solid white;
      display: inline;
      padding: 5px;
      background-color: #ffffff00;
    }

<div id="welcome">
      <p tabindex="0" class="title">
        Cards Against Oakbank
      </p>
      <p class="subtitle">A Cards Against Humanity clone.</p>
      <div id="nickbox">
        <label for="nickname">Nickname:</label>
        <input type="text" id="nickname" value="" maxlength="20" role="textbox"
            aria-label="Enter your nickname." data-lpignore="true" />
        <input type="button" id="nicknameconfirm" value="Set" />
        <span id="nickbox_error" class="error"></span>
      </div>
    </div>

由于我的想法已经用尽，因此目前没有尝试将焦点放在其中。我应该使用什么？我只希望#nickbox在每个屏幕上水平居中。我并不真的在乎支持较旧的浏览器，我关心的是不同的分辨率。谢谢。

Answer 1

对于布局，最好使用FlexBox。更好，.....灵活:)。它非常易于使用和理解。

例如，对父display:flex使用#welcome。与flex-direction:column一起使用，因此子元素不在一行上，而是在另一行下。然后在您需要的元素上，使用align-self:center将其居中在父容器中。

详细了解FlexBox

body {
  min-height: 640px;
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}
#nickbox {
  border: 1px solid white;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
  align-self:center;
}
#welcome {
  display:flex;
  flex-direction:column;
}

<div id="welcome">
  <p tabindex="0" class="title">
    Cards Against Oakbank
  </p>
  <p class="subtitle">A Cards Against Humanity clone.</p>
  <div id="nickbox">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
  </div>
</div>

OBS 通过flexbox 水平对齐项目，您可以在父级上使用justify-content或在所需子级上使用justify-self。要垂直对齐它们，请使用align而不是justify。在上面的示例中，由于align会更改元素的默认方向，因此我使用flex-direction:column来对齐水平。这就是align和justfy样式颠倒的原因

Answer 2

当我要放置东西时，请始终使用flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

实际工作示例：https://jsfiddle.net/ty6zcsw9/

html：将ID为nickbox的div包围为nickbox-container的div

<div class='nickbox-container'>
  <div id="nickbox">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox" aria-label="Enter your nickname."
      data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
  </div>
</div>

css：在您的CSS中添加以下内容

.nickbox-container{
    display: flex;
    justify-content: center;
}

Answer 3

问题与以下代码行有关：

#nickbox {
  ...
  display: inline; \
  ...
}

“内联”元素的行为类似于Text。 Stack Overflow上有关“居中” DIV的大多数解决方案都使用“块”显示。因此，这些解决方案对您不起作用。

但是还有希望！因为文本元素很容易以'text-align: center'行居中。将此行添加到正文，它应该可以解决您的问题。

这应该可以解决您的问题。请参见以下JS小提琴：

http://jsfiddle.net/jcolicchio/kNB3c/

body {
  min-height: 640px;
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  text-align:center;
}

Answer 4

您可以尝试

body {
  min-height: 640px;
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

#nickbox {
  border: 1px solid white;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="welcome">
  <p tabindex="0" class="title">
    Cards Against Oakbank
  </p>
  <p class="subtitle">A Cards Against Humanity clone.</p>
  <div id="nickbox">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
  </div>
</div>

Answer 5

您好吗？http://react-spring.surge.sh/perf#interpolation可以检查，您可以调整垂直方向以将.nickcontainer的垂直高度设置为适当的高度

<div id="welcome">
  <p tabindex="0" class="title">
    Cards Against Oakbank
  </p>
  <p class="subtitle">A Cards Against Humanity clone.</p>
  <div class="nickcontainer">

  <div id="nickbox">
  <p class="filed">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
    </p>
  </div>
   </div>
</div>

css

   body {
      background: #282a36;
      color: #bcc3cd;
      font-size: 12px;
      margin: 0;
      font-family: 'Source Sans Pro', sans-serif;
    }
    #nickbox {
      padding: 5px;
      background-color: #ffffff00;
      display: table-cell;
      vertical-align: middle;
    }
    .nickcontainer{    
     display: table;
     height: 82vh;}

     p.filed{
      border:solid 1px #fff;
      display:block;
       padding:5px;
       }

Answer 6

有很多方法可以解决您的小问题。

最简单的方法是将display:inline中的#nickbox更改为display:block并设置text-align:center。 div中的所有元素将自动流向中心。
您也可以设置width中的#nickbox并设置margin:0 auto。
或者，将#nickbox设置为display: flex justify-content: center。

尝试将div居中，但是什么也做不了

6 个答案: