Css水平居中

文本、行内元素、行内块元素水平居中

1
2
3

.parent {
  text-align: center;
}

使用到的样式：

text-align 属性规定元素中的行内元素（文本、行内块元素）的水平对齐方式。

值	描述
left	把行内元素（文本、行内块元素）排列到左边。默认值：由浏览器决定。
right	把行内元素（文本、行内块元素）排列到右边。
center	把行内元素（文本、行内块元素）排列到中间。
justify	实现两端对齐行内元素（文本、行内块元素）效果。
inherit	规定应该从父元素继承 text-align 属性的值。

单个块级元素

/* 需要居中的元素 */
.children {
  width: 100px; /* 必须指定宽度 */
  margin: 0 auto; /* 上下边距为0, 左右边距自动计算 */
}

使用到的样式：

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

多个块级元素

.parent {
  text-align: center;
}
.children {
  display: inline-block;
}

原理：将子元素设置为行内块元素，将父级元素设置行内元素居中

使用绝对定位实现

.parent {
  position: relative;
}

.children {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: pink;
  min-width: 50px;
  min-height: 50px;
}

使用到的样式：

position 属性规定元素的定位类型。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

注释：如果 “position” 属性的值为 “static”，那么设置 “left” 属性不会产生任何效果。

值	描述
auto	默认值。通过浏览器计算左边缘的位置。
%	设置以包含元素的百分比计的左边位置。可使用负值。
length	使用 px、cm 等单位设置元素的左边位置。可使用负值。
inherit	规定应该从父元素继承 left 属性的值。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

| 值 | 描述 |
| :———————————————————————— | :————————————– | — |
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 | |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 | |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 | |
| scale(x,y) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 | |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |

使用 flex 实现

.parent {
  display: flex;
  justify-content: center;
}

使用到的样式：

Flex 是 Flexible Box 的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器中央。
space-between	项目在行与行之间留有间隔。
space-around	项目在行之前、行之间和行之后留有空间。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

文本、行内元素、行内块元素 水平居中

单个块级元素

多个块级元素

使用绝对定位实现

使用 flex 实现

文本、行内元素、行内块元素水平居中