在网页设计中，实现元素的居中是一项常见且重要的任务。CSS 为我们提供了多种实现居中的方式，以下将为您介绍 15 种常见的 CSS 居中方式，快来看看您用过几种。

水平居中

1. 行内元素水平居中 对于行内元素，如文本，可以使用 text-align: center; 来实现水平居中。

2. 块级元素水平居中（定宽） 如果块级元素宽度固定，可以通过设置 margin: 0 auto; 来使其在父元素中水平居中。

3. 利用 flex 布局实现水平居中 父元素设置为 display: flex; justify-content: center; ，子元素即可水平居中。

垂直居中

1. 单行文本垂直居中 设置父元素的 line-height 等于其 height ，即可实现单行文本的垂直居中。

2. 利用绝对定位和负边距实现垂直居中 子元素绝对定位，并通过计算 top: 50%; margin-top: -自身高度的一半; 来实现垂直居中。

3. flex 布局实现垂直居中 父元素设置为 display: flex; align-items: center; 。

水平垂直居中

1. 绝对定位 + 负边距（已知宽高） 子元素绝对定位，top: 50%; left: 50%; margin-left: -自身宽度的一半; margin-top: -自身高度的一半;

2. 绝对定位 + transform （未知宽高） top: 50%; left: 50%; transform: translate(-50%, -50%);

3. flex 布局实现水平垂直居中 父元素 display: flex; justify-content: center; align-items: center;

4. grid 布局实现水平垂直居中 父元素 display: grid; place-items: center;

其他居中方式

1. 利用表格布局实现居中 将父元素设置为 display: table; ，子元素设置为 display: table-cell; vertical-align: middle; text-align: center;

2. 利用 writing-mode 实现垂直居中 通过设置特定的 writing-mode 属性来达到垂直居中效果。

不同的居中场景可能需要不同的方法，选择合适的居中方式可以让页面布局更加美观和合理。熟练掌握这些 CSS 居中方式，将为您的网页设计带来更多的灵活性和创意。

无论是构建简单的页面结构，还是设计复杂的响应式布局，居中技巧都能发挥重要作用。不断实践和探索，您将能更好地运用这些技巧，打造出令人惊艳的网页效果。