css居中显示

小圆点居中显示

• 1.未知高度时居中显示

实现代码：
由于位置子控件高度宽度所以，利用CSS代码：

  left: 50%;
    transform: translateX(-50%);

进行其居中显示，除外通过translate(X,Y)来控制元素在水平或垂直方向上的移动距离，单位位PX（像素单位），当值为负数时则表示当前元素向左或向上移动，进而准确的控制子控件位置。

• 2已知高度居中
  
  当已知高度宽度进行位置调节时，可以使用相对绝对定位，position: relative;position: absolute;但要找好相对的父级子级，遵循子绝父相同时最好给父类设置边界，其次可以利用manrgin的auto属性进行调节，或者top,left,right进行居中调试

实验

将小圆点居中靠右

实现代码：

.banner .banner-list{
    position: absolute;
    bottom: 50%;
    right: 0;
    transform: translateX(-50%);
}
.banner .banner-list li{
    height: 8px;
    width: 8px;
    border-radius: 50%;
    border: 2px solid #000000;
    display:flex;
    justify-content:center;  
    align-items:center; 
    margin: 0 6px;
}