如何在调整窗口大小时保持元素居中

Question

当我调整窗口的大小时，两个框都保持左对齐，如图片所示。

怎么把他们带到中心？

小提琴演示 x- 屏幕截图

div { 
    position: relative;
    outline: 1px dotted gray;
}

div #span1 { 
    background: green;
    display: inline-block;
    color: white;
    padding: 30px 30px;
}  
div #span2 { 
    background: green;
    display: inline-block;
    color: white;
    padding: 20px 50px;
}  
div .left {
    position: relative;
    left: 0; 
    top: 0;
}
div .right {
    position: relative;
    top: 0;
}

* HTML *

<div>
    <div class="two-columns">
    <span class="left" id="span1">1</span>
    <span class="right" id="span2">2</span>
</div>

Answer 1

text-align:center？演示，+垂直对齐

display:inline-block; 不是 display:flex;。也许你的标题问题应该更新:)

对于display:flex;，它应该是：justify-content:center; 演示

对于信息，在柔性盒模型中，对于垂直中心单元的margin:auto是雪崩的，而对于水平对中的演示中心x，y则是雪崩的。