[分享]css中居中方式

CSS是网页设计中不可避免的一部分，而居中元素也是页面设计中非常重要的一点。下面我们将介绍CSS中的三种居中方式。 第一种方式是水平居中。将元素在水平方向上居中通常使用margin属性。当我们希望元素...

CSS是网页设计中不可避免的一部分，而居中元素也是页面设计中非常重要的一点。下面我们将介绍CSS中的三种居中方式。

第一种方式是水平居中。将元素在水平方向上居中通常使用margin属性。当我们希望元素宽度确定时，可以通过设置左右margin为auto，即margin:0 auto;来实现元素水平居中。当元素宽度未知时我们可以使用text-align属性将其父元素中的文本居中，如text-align:center;。

.text {
    margin: 0 auto;
    text-align:center;
} 

第二种方式是垂直居中。当我们需要垂直居中元素的时，我们必须先确保该元素所在的容器有高度，然后使用position属性和top、bottom、margin等属性进行定位。如下代码所示，我们设定了父元素的高度为500px，子元素也有500px，在子元素上设置了top:50%和margin-top:-250px来达到垂直居中。

.container {
    height: 500px; 
    position: relative; 
}
.elem {
    height:500px;
    position:absolute;
    top:50%;
    margin-top:-250px;
} 

第三种方式是水平和垂直居中。当我们需要同时水平和垂直居中元素时，可以使用position属性、top、left、bottom、right属性和margin:auto等属性进行定位，如下所示。

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

在上例中，通过将元素的左上角定位于页面宽度的50%和高度的50%来实现元素的位置居中。使用transform属性将元素向左上移动其自身宽度和高度的50%来实现元素的内容居中。

以上是CSS中三种元素居中的方法，可以根据需要选择适合的方式。