css居中各种方法优缺点

在网页布局中，居中是一种非常基础且常用的技术。而CSS居中常用的方法有多种。以下将介绍常用的三种居中方法：居中水平、居中垂直和居中全局。

居中水平：

.container {
    text-align: center;
}
.item {
    display: inline-block;
}

优点：代码简单易懂，适用于一行或多行元素；

缺点：只适用于行内元素，块级元素需要使用margin属性或transform属性；

居中垂直：

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item {
    width: 200px;
    height: 100px;
}

优点：实现效果较好，无需指定高度，适用于单一元素；

缺点：需使用flex布局；

居中全局：

html,body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item {
    width: 200px;
    height: 100px;
}

优点：能够快速实现全局居中；

缺点：需明确指定html、body、container等元素的高度属性，会影响其他布局。

以上三种方法各有优缺点，具体使用需根据实际情况决定。