2020-09-21 div元素垂直居中

DIV元素垂直居中

定位垂直居中

<body>
<div class="父元素" >
	<div class="子元素"></div>
</div>
</body>
<style>
#父元素{position: relative;} //定位
#需要居中得div元素{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	height: 30%;
	margin: auto;
};
</style>

定位垂直居中

<body>
	<div id="父元素">
		<div id="子元素">Content here</div>
	</div>
</body>
<style>
#父元素{position: relative;} //定位
#需要居中得div元素{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	height: 30%;
	margin: auto;
};
</style>

padding垂直居中

<body>
	<div id="父元素">
		<div id="子元素">Content here</div>
	</div>
</body>
<style>
#父元素{
	padding: 5% 0;
};
#子元素 {
	padding: 10% 0;
};
</style>

display: table垂直居中

<body>
	<div id="父元素">
		<div id="子元素">Content here</div>
	</div>
</body>
<style>
#父元素{
	height: 200px;
    width:200px;
    display: table;
};
#子元素 {
	display: table-cell;
    vertical-align: middle;
};
</style>

Floater 垂直居中

<body>
<div id="parent">
	<div id="floater"></div>
	<div id="child">Content here</div>
</div>
</body>
<style>
#parent {
	height: 250px;
};
#floater {
	float: left;
	height: 50%;
	width: 100%;
	margin-bottom: -50px;
};
#child {
	clear: both;
	height: 100px;
};
</style>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页