试图使一个 div 居中，但没有任何东西可以工作 [重复]

Question

我试图将一个简单的 div 居中，但我失败了。我尝试的任何方法都不起作用，包括 Stack Overflow 上的许多示例。这是我的 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 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 2

问题与下面这行代码有关：

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

“内联”元素的行为类似于文本。 Stack Overflow 上关于“居中”DIV 的大多数解决方案都使用“块”显示。所以这些解决方案对你不起作用。

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

这应该可以解决您的问题。请参阅以下 JS Fiddle：

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 3

你可以试试这个

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 4

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

例如，在父 #welcome 上使用 display:flex。与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 来对齐horizo​​ntaly，因为flex-direction:column 改变了元素的默认方向。这就是为什么 align 和 justfy 样式被颠倒了

Answer 5

嗨，你能检查一下这个https://jsfiddle.net/fnq9v4s5/1/，你可以垂直调整给.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

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

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