純css+基於body的子集div的水平垂直居中

時間 2019-11-20

標籤 css 基於 body 子集 div 水平垂直居中欄目 CSS 简体版

原文原文鏈接

小果今天要實現這樣的效果:單純css樣式，實現body下子集的水平垂直居中。css

body內容：html

<body>
    <div class="div1">
       	<div class="div2"></div>
    </div>
</body>

效果：web

經過一系列的嘗試，實現了四種方法，驚奇的發現，其中三個是用position：absolute實現的:(div大小肯定)flex

1.原理：position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;spa

<style type="text/css">
　　html,body{
	height:100%;
	width:100%;
	background: black;
	}
　　.div1{
	height: 100px;
	width: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	background: pink;
	}
　　.div2{
	height: 10px;
	width: 10px;
	margin-top: 90px;
	background: lightblue;
	}
</style>

2.原理：margin: auto;position: absolute;top: 0;right:0;bottom: 0;left: 0;3d

<style type="text/css">
　　html,body{
　　　　height:100%;
　　　　width:100%;
　　　　background: black;
　　　　}
　　.div1{
	height: 100px;
	width: 100px;
	margin: auto;
	position: absolute;
	top: 0;
	right:0;
	bottom: 0;
	left: 0;
	background: pink;
	}
　　.div2{
	height: 10px;
	width: 10px;
	margin-top: 90px;
	background: lightblue;
	}
</style>

3.原理：transform:translate(-100px,-100px);position: absolute;top: 50%;left: 50%;orm

<style type="text/css">
　　html,body{
	height:100%;
	width:100%;
	background: black;
	}
　　.div1{
	height: 100px;
	width: 100px;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	background: pink;
	-webkit-transform:translate(-100px,-100px);
	transform:translate(-100px,-100px);
	}
　　.div2{
	height: 10px;
	width: 10px;
	margin-top: 90%;
	background: lightblue;
	}
</style>

4.原理：display:flex;justify-content:center;align-items:center;htm

body是這樣子的：blog

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

css：it

<style type="text/css">
　　html,body{
	height:100%;
	width:100%;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	}
　　.div1{
	height: 100px;
	width: 100px;
	background: pink;	
	}
　　.div2{
	height: 10px;
	width: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: 40px;
	margin-left: -50px;
	background: lightblue;
	}
</style>

以上是div1的大小肯定的居中方法，那若是大小不知道呢？小果使用了paddingO(∩_∩)O

代碼君：（display: table-cell必不可少啊）

body內容：

<body>
    <div class="div1">
       	<div class="div2"></div>
    </div>
</body>

css內容：

<style type="text/css">
　　html,body{
	height:100%;
	width:100%;
	background: black;
	}
　　.div1{
	padding: 50px;
	display: table-cell;
	position: absolute;
	top: 50%;
	right:50%;
	bottom: 50%;
	left: 50%;
	background: pink;
	margin: auto;
	}
　　.div2{
	padding: 10px;
	margin-top: 30px;
	margin-left: -50px;
	background: lightblue;
	}
</style>

　然而，效果是這樣的：

好了，整理完畢。若是果果大軍們有什麼意見，或者更好的方法，歡迎交流，隨之奉陪哈，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。