[分享]css两个各自居中

在CSS中，元素居中对于布局和设计来说非常重要。本文将介绍两种常用的让元素居中的方法。/ 居中方法一：文本居中 / .center { textalign: center; lineheight: 2...

在CSS中，元素居中对于布局和设计来说非常重要。本文将介绍两种常用的让元素居中的方法。

/* 居中方法一：文本居中 */
.center {
  text-align: center;
  line-height: 200px; /* 确定元素高度 */
} 

在此方法中，我们使用了text-align属性将文本置于容器的中央。但是需要注意的是，此方法只对块级元素适用。

/* 居中方法二：绝对定位 */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

这种方法更具可适用性。使用position属性将元素定位于容器的中心，使用transform属性平移元素至中央位置。需要注意的是，这种方法必须为元素指定宽度和高度。