15种CSS居中的方式

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;

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;