Html 试图将一个div居中，但什么也做不到'；我什么也做不到

我正试图集中一个简单的div，但我失败得很惨。我尝试的东西都不管用，包括这里关于堆栈溢出的许多例子。以下是我的CSS（主要部分）：

正文{
最小高度：640px；
背景:#282a36；
颜色：#bcc3cd；
字体大小：12px；
保证金：0；
字体系列：“源Sans-Pro”，无衬线；
}
#尼克box{
边框：1px纯白；
显示：内联；
填充物：5px；
背景色：#FFFFFF 00；
}

针对Oakbank的信用卡

反人类牌克隆
昵称：

当我要定位某些东西时，请始终使用flexbox

现场工作示例：

html：用id

nickbox

环绕div，用

nickbox容器包围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>  

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

---

该问题与以下代码行有关：

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

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

但还是有希望的！因为文本元素很容易用

“text-align:center”行居中。将这一行添加到正文中，它将解决您的问题

这会解决你的问题。请参见以下JS Fiddle：


你可以试试这个


正文{
最小高度：640px；
背景:#282a36；
颜色：#bcc3cd；
字体大小：12px；
保证金：0；
字体系列：“源Sans-Pro”，无衬线；
}
#尼克box{
边框：1px纯白；
显示：内联；
填充物：5px；
背景色：#FFFFFF 00；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}


针对Oakbank的信用卡

反人类牌克隆
昵称：
对于布局，最好使用FlexBox。它更灵活：）。它很容易使用和理解

例如，在父级上使用
display:flex
#welcome

。与

flex-direction:column

一起使用，这样子元素就不会停留在一行上，而是在另一行的下面。然后在所需元素上使用

align self:center

将其居中放置在父容器中

阅读更多关于

正文{
最小高度：640px；
背景:#282a36；
颜色：#bcc3cd；
字体大小：12px；
保证金：0；
字体系列：“源Sans-Pro”，无衬线；
}
#尼克box{
边框：1px纯白；
显示：内联；
填充物：5px；
背景色：#FFFFFF 00；
自对准：居中；
}
#欢迎光临{
显示器：flex；
弯曲方向：立柱；
}

针对Oakbank的信用卡

反人类牌克隆
昵称：

您好，您能检查一下吗？您可以垂直调整

。nickcontainer

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

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

---

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

最简单的方法是将

#nickbox

的

显示：inline

更改为

显示：block

并设置

文本对齐：居中

。div中的所有元素将自动流向中心

您也可以设置

#nickbox

的

宽度，并设置
边距：0 auto

或者，将

#nickbox

设置为

display:flex

justify content:center

---

我同意这个解决方案，但它打破了OP的设计。虽然我也喜欢使用flexbox来居中DIV，但为什么要添加不必要的DIV呢？即使使用flexbox，也有一些解决方案不需要修改HTML。添加HTML元素以匹配设计应始终作为最后手段处理solution@MichaëlVanderheyden您能举一个使用flexbox的例子而不添加额外的代码吗div@AkshayMilmile当然，只要看看我在这个话题上的回答：你的论点是正确的，但是从问题中的例子来看，所有元素都是块元素，并且默认的对齐项目是拉伸的，#welcome上的flexbox将不起作用。只有在#welcome parent中添加了一些内联元素时，才会产生潜在的不必要的影响。因此，在这样一个小的示例中，添加一个简单的div确实不是那么引人注目，但没有必要。将相同的逻辑应用于更大的项目将导致一大堆不必要的元素，这使得DOM树比它必须的复杂得多。虽然此解决方案可以工作，但使用绝对定位只是将元素居中有点过分。此外，如果没有position:relative on#welcome，元素将绝对定位在页面上，而不是容器上，这可能不是想要的效果。最后，#nickbox在页面上居中，但问题只是水平居中

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