文本、行内元素、行内块元素 水平居中
.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 从其父元素继承此属性。
