css两侧向中间靠拢

在网页设计中，有时需要让文本或元素在页面中水平居中。一种实现方式是使用CSS的text-align属性，将其设置为center即可实现文本在其父元素中水平居中。但当需要让两个元素放在一起并居中时，text-align无法满足需求。此时需要使用其他的CSS属性和技巧实现。下面介绍一种常见的方法：将两个元素向中间靠拢。

.center {
    display: flex;
    justify-content: center;
    align-items: center;
} 

上述代码是一个基于Flexbox的居中实现方式。首先将父元素设置为display:flex，让其成为flex容器。然后使用justify-content:center和align-items:center让子元素在横向和纵向上居中。

html,body {
    height: 100%;
}
.wrapper {
    position: relative;
    height: 100%;
}
.left, .right {
    position: absolute;
    top: 50%;
}
.left {
    left: 0;
}
.right {
    right: 0;
} 

另一种方法是使用绝对定位。首先将html和body元素的高度设置为100%，让其充满整个页面。然后在父元素中设置position:relative，将它变为定位父元素。再设置要居中的两个子元素的position为absolute，使用top:50%将它们垂直居中。最后再分别使用left:0和right:0将它们水平居中，实现两者向中间靠拢的效果。