[分享]css两边对其属性

CSS中的两边对其属性指的是让元素在父级容器中水平居中。在第一次学习CSS的时候，很多人会使用margin属性来实现水平居中，但是这种方式并不是最好的，因为在不同的环境下，元素的居中效果可能会出现偏差...

CSS中的两边对其属性指的是让元素在父级容器中水平居中。在第一次学习CSS的时候，很多人会使用margin属性来实现水平居中，但是这种方式并不是最好的，因为在不同的环境下，元素的居中效果可能会出现偏差。下面介绍两种最常用的两边对其属性的方法。

/* 方法一：使用text-align属性 */
.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

/* 方法二：使用flex布局 */
.parent {
  display: flex;
  justify-content: center;
}
.child {
  /* 这里可以根据需要进行设置 */
} 

方法一：使用text-align属性

首先，在父级容器中设置text-align属性为center，这样就可以让容器中的所有文字、图片、内联元素都水平居中。但是，块级元素默认是占据父级容器的全部宽度的，这时候只有将其转为内联元素才能实现水平居中。因此，我们需要给块级元素添加display: inline-block属性。这样，块级元素就可以水平居中了。

方法二：使用flex布局

在CSS3中，出现了强大的flex布局。设置父级容器的display属性为flex，就可以启用flex布局，然后使用justify-content属性来控制元素的对齐方式。在这里，我们设置justify-content属性为center，就可以将元素水平居中了。需要注意的是，flex布局只对子元素有效，因此在上面的代码中，我们需要给子元素设置相应的样式。

总体来说，使用text-align和flex布局都是比较方便和稳定的方法，但是在一些较老的浏览器中可能不被支持。因此，如果考虑兼容性，还需要使用其他一些技巧来实现元素的水平居中。