css已知宽高和未知宽高的居中定位

此文转载自：https://blog.csdn.net/m0_52267483/article/details/112913266#commentBox

1、已知宽高

上图中我们想要对已知宽度的“服务范围”进行左右居中定位，我们可以先选择left或者right样式，这里我们选择的是left，这里的50%指的是这个盒子的最左侧位于水平的百分之五十的地方，也就是中间位置，因为我们知道整体的宽度，所以我们可以直接采用在向左移动宽度的一半，也就是margin-left: -175px;如下图，保存刷新之后就水平居中了。

2、未知宽高

上图的滚动圆点我们就不知道他的长度和宽度，首先还是使它的最左侧位于图片的百分之50（left:50%;），最主要的是下面的transform，translate是位移属性。
1.translateX(x)：元素在水平方向中移动的距离的单位用px和百分比表示，当x出现正值的时候，表示元素在水平方向右有移动，当x为负值的时候，表示该元素向左移动
2.translateY(y)：x是在水平方向上移动，y是在垂直方向上移动，当
y出现正值的时候，说明该元素在向下移动，如果出现负值，说明是向上移动，和我们的正常思维相反。
3.translate(x,y)
通过这个，我们就可以让其居中了
下图就是垂直居中

PS：此外还有许多居中方式
1、多块级元素水平居中
单行文字垂直居中

2、块级元素水平居中

3、内联元素水平居中
4、块级元素水平居中
通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中
5、利用弹性布局（flex）
6、通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中