[分享]css两列布局居中显示

在Web开发中，常常需要使用到两列布局。而让这两列能够居中显示，是一件很常见的需求。在CSS中，我们可以通过一些简单的方法实现如下代码所示的两列布局居中显示。 先看一下HTML的结构： 左边栏的内...

在Web开发中，常常需要使用到两列布局。而让这两列能够居中显示，是一件很常见的需求。在CSS中，我们可以通过一些简单的方法实现如下代码所示的两列布局居中显示。
先看一下HTML的结构：

<div class="container">
    <div class="left-column">
        <p>左边栏的内容</p>
    </div>
    <div class="right-column">
        <p>右边栏的内容</p>
    </div>
</div>

这里我们使用了一个container的div作为容器，再在容器中分别创建左边和右边两栏。
下面是CSS代码：

.container {
    display: flex;
    justify-content: center;
}
<br>
.left-column,
.right-column {
    width: 50%;
}
<br>
.left-column {
    margin-right: 10px;
}
<br>
.right-column {
    margin-left: 10px;
}

首先，我们给container设置了display: flex; 和justify-content: center;。这样就可以让其内部的元素居中对齐了。
接着，我们给左右两栏设置了相同的宽度（width: 50%;）。并且，我们在左栏设置了margin-right: 10px;，在右栏设置了margin-left: 10px;。这样的话，两栏之间就会有10px的间距，使布局看起来更加舒适。
通过这些CSS代码，我们就可以轻松地实现两列布局的居中显示。如果您在实际开发中遇到了这个问题，可以参照上述代码来解决。