1：文本居中：text-align:center;

2：行内元素居中：text-align:center;

3：块级元素居中：margin:0 auto;

4：绝对定位元素居中：top:50%; left:50%; transform:translate(-50%,-50%);

5：flex布局居中：display:flex; justify-content:center; align-items:center;

6：table布局居中：display:table; margin:0 auto;

7：grid布局居中：display:grid; place-items:center;

8：绝对定位元素水平居中：left:50%; transform:translateX(-50%);

9：绝对定位元素垂直居中：top:50%; transform:translateY(-50%);

10：等高布局居中：display:flex; align-items:center;

11：多行文本垂直居中：display:flex; align-items:center; justify-content:center;

12：单行文本垂直居中：line-height:height;

13：表格单元格垂直居中：display:table-cell; vertical-align:middle;

14：伪元素居中：position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);

15：文字居中：text-align:center; vertical-align:middle;

15种CSS居中的方式代码示例:

1：文本居中：text-align:center;

<div style="text-align:center">这是居中的文本</div>

2：行内元素居中：text-align:center;

<span style="text-align:center">这是居中的行内元素</span>

3：块级元素居中：margin:0 auto;

<div style="width:200px; height:200px; background-color:gray; margin:0 auto;"></div>

4：绝对定位元素居中：top:50%; left:50%; transform:translate(-50%,-50%);

<div style="position:relative;">  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100px; height:100px; background-color:red;"></div></div>

5：flex布局居中：display:flex; justify-content:center; align-items:center;

<div style="display:flex; justify-content:center; align-items:center; width:200px; height:200px; background-color:gray;">  <div style="width:100px; height:100px; background-color:red;"></div></div>

6：table布局居中：display:table; margin:0 auto;

<div style="display:table; margin:0 auto;">  <div style="display:table-cell; width:200px; height:200px; background-color:gray;"></div></div>

7：grid布局居中：display:grid; place-items:center;

<div style="display:grid; place-items:center; width:200px; height:200px; background-color:gray;">  <div style="width:100px; height:100px; background-color:red;"></div></div>

8：绝对定位元素水平居中：left:50%; transform:translateX(-50%);

<div style="position:relative;">  <div style="position:absolute; left:50%; transform:translateX(-50%); width:100px; height:100px; background-color:red;"></div></div>

9：绝对定位元素垂直居中：top:50%; transform:translateY(-50%);

<div style="position:relative;">  <div style="position:absolute; top:50%; transform:translateY(-50%); width:100px; height:100px; background-color:red;"></div></div>

10：等高布局居中：display:flex; align-items:center;

<div style="display:flex; align-items:center; width:200px; height:200px; background-color:gray;">  <div style="width:100px; height:100px; background-color:red;"></div>  <div style="width:100px; height:100px; background-color:blue;"></div></div>

11：多行文本垂直居中：display:flex; align-items:center; justify-content:center;

<div style="display:flex; align-items:center; justify-content:center; width:200px; height:200px; background-color:gray;">  <div style="background-color:red;">这是多行文本的居中方式</div></div>

12：单行文本垂直居中：line-height:height;

<div style="height:200px; background-color:gray; line-height:200px; text-align:center;">这是单行文本的居中方式</div>

13：表格单元格垂直居中：display:table-cell; vertical-align:middle;

<div style="display:table; width:200px; height:200px; background-color:gray;">  <div style="display:table-cell; vertical-align:middle; background-color:red;"></div></div>

14：伪元素居中：position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);

<div style="position:relative; width:200px; height:200px; background-color:gray;">  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);">    <div style="width:100px; height:100px; background-color:red;"></div>  </div></div>

15：文字居中：text-align:center; vertical-align:middle;

<div style="width:200px; height:200px; background-color:gray; text-align:center; display:table-cell; vertical-align:middle;">这是居中的文本</div>