CSS uses position + margin to realize the horizontal and vertical centering of fixed boxes

Time:2021-12-5

margin:auto; + position: absolute; Up, down, left and right: 0
Just look at the demo

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	< title > use position + margin to center the fixed box horizontally and vertically < / Title >
	<style>
		body * {
			outline: 1px #ff0000 solid;
		}

		.father {
			width: 500px;
			height: 300px;
			position: relative;
		}

		.father .son {
			width: 180px;
			height: 140px;
			/*  */
			position: absolute;
			right: 0;
			bottom: 0;
			top: 0;
			left: 0;
			margin: auto;
		}
	</style>
</head>

<body>
	<div class="father">
		< div class = "son" > margin: Auto + up, down, left and right: 0 < / div >
	</div>
</body>

</html>

//end

This is the end of this article about how to use position + margin to realize the horizontal and vertical centering of fixed boxes in CSS. For more information about the horizontal and vertical centering of fixed boxes in CSS, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you can support developeppaer in the future!