[分享]css元素上下对齐左右居中

CSS是网页设计必不可少的一部分，它可以有效地布局网页元素，比如上下对齐和左右居中。本文将介绍如何通过CSS来实现这些效果。上下对齐：.parent { display: flex; alignite...

CSS是网页设计必不可少的一部分，它可以有效地布局网页元素，比如上下对齐和左右居中。本文将介绍如何通过CSS来实现这些效果。

上下对齐：

.parent {
  display: flex;
  align-items: center;
} 

以上代码中，我们将父元素的display属性设置为flex，然后通过align-items属性来实现元素的上下对齐。默认情况下，该属性的值为stretch，即元素会被拉伸到与父元素相同的高度，但是我们可以设置该属性的值为center或者baseline，从而实现上下对齐的效果。

左右居中：

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} 

以上代码中，我们将子元素的position属性设置为absolute，然后分别将left和top属性设置为50%，这样子元素就会移动到父元素的中间点。但是，这时元素只会水平居中，我们还需要通过transform属性来进行纵向调整。具体来说，我们将元素相对于自己的宽度和高度的50%使用负值进行平移，这样就可以在两个方向上进行居中了。

以上就是实现CSS元素上下对齐和左右居中的方法，希望对大家有所帮助。