CSS博文尚美轮播图小圆点的位置

最新推荐文章于 2022-07-23 08:48:31 发布

又1个晴天

最新推荐文章于 2022-07-23 08:48:31 发布

阅读量691

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/Shasha_Bai/article/details/112869447

版权

本文详细介绍了四种CSS居中显示的方法：未知宽度的水平居中、未知高度的垂直居中、已知宽度的水平居中以及已知高度的垂直居中。通过父元素相对定位和子元素绝对定位，结合transform属性，实现了不同条件下的元素精准居中。这些技巧对于前端开发者优化页面布局至关重要。

摘要由CSDN通过智能技术生成

CSS居中显示

一、未知宽度水平居中
二、未知高度垂直居中
三、已知宽度水平居中
四、已知高度垂直居中

一、未知宽度水平居中

（小圆点在正下方水平居中如图）
在这里插入图片描述
1.改变四个小圆点的样式：float: left;实现小圆点横排显示，margin: 0 6px;撑开小圆点。
2.父相子绝使四个小圆点于图片下方居中：
bottom: 20px;使四个小圆点位于图片下方；
left: 50%;四个小圆点前端到图片左边距离50%；
transform: translateX(-50%);向左移动自身50%才使图片水平居中。
在这里插入图片描述