[分享]css两个div居中并排

在网页布局中，常常需要将两个div居中并排，让网页看起来更加美观。下面是实现的css代码： / 定义父元素 / .container { textalign: center; / 使内部div居中 /...

在网页布局中，常常需要将两个div居中并排，让网页看起来更加美观。下面是实现的css代码：

 /* 定义父元素 */
    .container {
        text-align: center; /* 使内部div居中 */
    }
    /* 定义内部两个div */
    .left, .right {
        width: 200px; /* 设置宽度 */
        height: 200px; /* 设置高度 */
        display: inline-block; /* 让两个div内联 */
        vertical-align: middle; /* 使其在中间对齐 */
    } 

首先，定义了一个父元素容器。容器的文本对齐方式设置为居中，这样里面的子元素（即两个div）就能在容器中居中显示。接下来，定义了两个内联的div元素。这两个div元素的宽度和高度都是200px，并且设置了内联显示。为了让这两个div居中，使用了vertical-align属性，并将其值设置为middle。

当然，还有其他的方法可以实现两个div的居中并排。比如，可以使用flex布局，如下所示：

 /* 定义父元素 */
    .container {
        display: flex; /* 设置flex布局 */
        justify-content: center; /* 让元素在父元素中水平居中 */
        align-items: center; /* 让元素在父元素中垂直居中 */
    }
    /* 定义内部两个div */
    .left, .right {
        width: 200px; /* 设置宽度 */
        height: 200px; /* 设置高度 */
    } 

这种方法比较简洁，直接使用了flex布局。设置容器的display属性为flex，这样就将容器变成了一个弹性盒子。接下来，设置justify-content属性为center，让子元素水平居中，然后设置align-items属性为center，让子元素垂直居中。

通过以上两种方法，就可以实现两个div居中并排的效果了。