四种定位方式(粘性定位除外)：

静态定位、绝对定位、相对定位、固定定位

是否脱离标准流

脱离标准流：

绝对定位
固定定位

不脱离标准流：

静态定位
相对定位

不脱离标准流的水平居中

margin: 0 auto;
/*或者*/
margin: auto;

此处以静态定位为例，相对定位亦是

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.center {
				position: static;/* 静态定位 */
				margin: 0 auto;/* 或者使用margin: auto; */
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div class="center">
			
		</div>
	</body>
</html>

在这里插入图片描述

脱离标准流的水平居中

left: 50%;
margin-left: 宽度一半取负数;

也可以

right: 50%;
margin-right: 宽度一半取负数;

这里以绝对定位为例，固定定位相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.center {
				position: absolute;/* 绝对定位 */
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				left: 50%;/*按照父元素为基准，左侧向右偏移一半*/
				margin-left: -50px;/*由于自身有宽度，反向偏移自身宽度的一半*/
				
			}
		</style>
	</head>
	<body>
		<div class="center">
			 
		</div>
	</body>
</html>

在这里插入图片描述

0 条评论