css 利用 position + margin 實(shí)現(xiàn)固定盒子橫向縱向居中的方法

發(fā)布時(shí)間：2020-12-23 14:32:25 作者：352328759

這篇文章主要介紹了css 利用 position + margin 實(shí)現(xiàn)固定盒子橫向縱向居中的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

margin:auto; + position: absolute; 上下左右:0
一看 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>利用 position + margin 實(shí)現(xiàn)固定盒子橫向縱向居中</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 + 上下左右:0</div>
	</div>
</body>

</html>

//end

到此這篇關(guān)于css 利用 position + margin 實(shí)現(xiàn)固定盒子橫向縱向居中的方法的文章就介紹到這了,更多相關(guān)css固定盒子橫向縱向居中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！