css居中对齐

---

前言

css居中对齐

---

一、水平居中

块级标签水平居中

1.宽度确定

给需要居中的元素设置margin: 0 auto;
代码：
宽度确定使用定位属性:
设置父元素为相对定位，子元素为绝对定位，设置子元素的left:50%；margin-left: -宽度的一半。
代码：

2.宽度不确定

子元素设置为display: inline-block 或 display: inline;将其转换成行内块级/行内元素，给父元素设置 text-align: center;
代码：

宽度不确定使用定位属性:
设置父元素为相对定位，子元素为绝对定位，设置子元素的left:50%；transform: translateX(-50%);。
代码：

行级标签水平居中

1.父级是块级元素，直接给父级元素设置 text-align: center;
代码:

2.父级元素不是块级元素，将父元素设置为块级元素，再给父元素设置 text-align: center;
代码：

二、垂直居中

1.块级元素

高度确定

设置父元素为相对定位，子元素为绝对定位，设置子元素的top:50%；margin-top: -高度的一半。
代码：

高度不确定

使用定位属性:设置父元素为相对定位，子元素为绝对定位，设置子元素的top:50%；transform: translateY(-50%);。
代码：

2.行级元素

单行

设置行级元素的"line-height"值为父级元素的高
代码：

多行

给父级元素设置display:table-cell;和vertical-align: middle;
代码：

三、水平垂直居中

已知宽高

设置父级元素为相对定位，子级元素为绝对定位，top: 0; bottom: 0; left: 0;right: 0; margin: auto;
代码：

设置父级元素为相对定位，给子元素设置绝对定位，top: 50%;left: 50%; margin-top: -元素高度的一半; margin-left: -元素宽度的一半;
代码：

未知宽高

使用定位
设置父级元素为相对定位，给子级元素设置绝对定位，top: 50%;left: 50%; transform: translateY(-50%) translateX(-50%)；
代码：