CSS中如何实现元素的上下左右居中

最新推荐文章于 2025-04-25 12:29:18 发布

原创最新推荐文章于 2025-04-25 12:29:18 发布 · 777 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了如何使用CSS的margin、position、flex布局和transform属性实现元素的上下左右居中，包括设置auto、absolute、flex和translate方法。

1.使用margin属性

使用margin属性可以设置元素的上下左右外边距，设置上下左右外边距为auto，就可以实现元素的上下左右居中，如下：


div {
    width: 100px;
    height: 100px;
    margin: auto;
}

2.使用position属性

使用position属性可以定位元素，将position设置为absolute，将元素的top、right、bottom、left属性设置为0，就可以实现元素的上下左右居中，如下：

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

3.使用flex布局

使用flex布局可以很方便的实现元素的上下左右居中，只需要将父元素的display设置为flex，设置justify-content和align-items属性值为center，就可以实现元素的上下左右居中，如下：

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

div {
    width: 100px;
    height: 100px;
}

4.使用transform属性

使用transform属性可以实现元素的上下左右居中，只需要将transform设置为translate(-50%, -50%)，就可以实现元素的上下左右居中，如下：

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}