面试必问 - CSS 中元素居中小技巧

在网页设计中，居中是一个至关重要的布局技巧，能够确保你的页面在不同设备和屏幕尺寸上呈现出优雅的样式。

在这篇文章中，将介绍一些 CSS 居中的基本技巧，适用于各种场景。

1. 水平居中

• 文本水平居中

通过设置 text-align: center 属性，我们可以使文本在其父容器中水平居中，使得页面内容更易读。

.text-center {text-align: center;
}

• 块级元素水平居中

对于块状元素，我们设置一个明确的宽度，并使用 margin: 0 auto 来实现水平居中。

.block-center {width: 50%; /* 设置一个具体的宽度 */margin: 0 auto;
}

2. 垂直居中

• 文本垂直居中

通过设置文本容器的高度和行高，我们可以实现文本在其容器中垂直居中显示。

.vertical-text-center {height: 100px;line-height: 100px; /* 行高等于高度 */
}

• 块级元素垂直居中

使用 Flex 布局，我们可以轻松实现块级元素在其容器垂直居中。

.vertical-block-center {display: flex;align-items: center;height: 200px;
}

3. 水平和垂直居中

通过 Flex 和 Grid 布局，我们可以实现内容在水平和垂直方向上同时居中显示，适用于各种布局场景。

• Flex 布局居中

.flex-center {display: flex;justify-content: center;align-items: center;height: 300px;
}

• Grid 布局居中

.grid-center {display: grid;place-items: center;height: 400px;
}

• 绝对定位居中

使用绝对定位和 transform 属性，我们可以使元素在其父容器中水平和垂直居中。

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