css水平居中:使用absolute+transform

最新推荐文章于 2024-07-24 06:54:05 发布

xvzhengyang

最新推荐文章于 2024-07-24 06:54:05 发布

阅读量1.1k

点赞数 2

分类专栏：前端 css 文章标签：前端 css 水平居中

前端同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

css

47 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css水平居中:使用absolute+transform</title>
		<!-- 1.父元素为相对布局,子元素为绝对布局 2.子元素设置left为50%;之后在向左移动自身的负50% -->
		<!-- 优点:居中元素不会对其他的产生影响, 弱点:transform属于css3内容,存在兼容性问题,高版本浏览器需要添加前缀 -->
		<style type="text/css">
			.parent{
				position: relative;
			}
			.son{
				position: absolute;
				color: aqua;
				/* 这个left right top bottom 使用百分比是相对于父元素 */
				left: 50%;
				/* transform等是相对于元素本身 */
				transform: translateX(-50%);
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son">
				ceshi
			</div>
		</div>
	</body>
</html>