[分享]css两个盒子水平居中并列

在网页布局中，有时候需要将两个盒子同时水平居中并列。这种布局方式既美观又合理，可以为用户提供更好的浏览体验。CSS提供了多种实现方式，本文将介绍其中一种简单而有效的方法。 container { wi...

在网页布局中，有时候需要将两个盒子同时水平居中并列。这种布局方式既美观又合理，可以为用户提供更好的浏览体验。

CSS提供了多种实现方式，本文将介绍其中一种简单而有效的方法。

 #container {
        width: 100%;
        display: flex; /* 将父元素设置为弹性布局 */
        justify-content: center; /* 将子元素水平居中 */
        align-items: center; /* 将子元素垂直居中 */
    }
    .box {
        width: 200px;
        height: 100px;
        background-color: #ccc;
        margin: 0 10px; /* 控制两个盒子之间的间距 */
    } 

以上是css实现两个盒子水平居中并列的代码。其中，父元素设置了display:flex，将子元素布局为弹性布局；justify-content:center和align-items:center分别实现了子元素的水平和垂直居中。

两个盒子的设置较为简单，只需要设置盒子的宽高和背景色，并通过margin属性控制两个盒子之间的间距即可。

总的来说，本文介绍的方法简单、灵活而且兼容性较好，具有一定的实用性。希望读者可以在实际应用中加以运用。