显示后居中的剩余元素：无

Question

注意：我使用的是Flexbox

当重新调整屏幕大小时，我使用＆＃34; display：none＆＃34;删除一些不再适合尺寸缩小的元素，但一旦删除它们，仍然显示的元素不再在其列中水平居中。

例如:(这不是代码简单说明）

|-------------------------------|
|       |       |       |       |
|  1 2  |  1 2  |  1 2  |  1 2  |
|-------|-------|-------|-------|  

Ex：现在在＆＃34; 2＆＃34; element具有属性＆＃34; display：none＆＃34; 留下的东西不再是水平居中的。

|-------------------------------|
|       |       |       |       |
|  1    |  1    |  1    |  1    |
|-------|-------|-------|-------|  

当我缩小并移除元素＆＃34; 2＆＃34;？

时，保持水平居中的正确方法是什么？

Answer 1

选项1 - Flex解​​决方案

要将项目置于flexbox中心 - 并使其保持居中 - 您可以使用justify-content和align-items属性。

HTML

<article id="container">
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
 </article>

CSS

#container {
    display: flex;
    justify-content: center; /* align flex items horizontally (in this case) */
    align-items: center; /* align flex items vertically (in this case) */
    height: 50px;
    background-color: lightgray;
    border: 2px dashed black;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    padding: 5px;
    margin: 5px;
    font-size: 1.2em;
    border: 1px solid red;
}

@media screen and (max-width: 500px) {
    span.two { display: none; }
}

DEMO（重新调整效果窗口）

选项2 - 文本对齐

保持内容居中的另一种方法是在父级上使用text-align: center。

HTML（与上述相同）

CSS

#container {
    display: flex;
    justify-content: center; /* align flex items horizontally (in this case) */
    align-items: center; /* align flex items vertically (in this case) */
    height: 50px;
    background-color: lightgray;
    border: 2px dashed black;
}

section {
    width: 50px;
    padding: 5px;
    margin: 5px;
    font-size: 1.2em;
    border: 1px solid red;
    text-align: center;
}

@media screen and (max-width: 500px) {
    span.two { display: none; }
}

DEMO

Answer 2

一种方法是删除＆＃34; 2＆＃34;来自DOM的元素完全使用javascript，然后flexbox将中心剩余的元素。

var element2 = document.getElementById("element2");
element2.parentNode.removeChild(element2);

另一种方法是设置＆＃34; 2＆＃34;元素到＆＃34;位置：绝对＆＃34;，然后flexbox无法移动它，其余元素将居中，好像它不在那里。

#element2{
  display:none;
  position:absolute;
}