2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

div内容垂直居中对齐

div垂直居中csshtml作者:猿2048志愿者

css垂直居中属性设置vertical-align: middle对div不起作用,例如:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Commpatible" content="IE=edge">
<title>DIV垂直居中对齐</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

body {text-align: center; vertical-align: middle;}
.outer {
	width: 400px;
	height: 120px;
	position: relative;
	left: 20px;
	top: 20px;
	text-align: center;
	vertical-align: middle;
	border: 1px dashed blue;
}

.button {
	width: 200px;
	height: 40px;
}
</style>
</head>
<body>
	<div class='outer'>
		<button class='button'>在DIV中垂直居中</button>
	</div>
</body>
</html>

运行后按钮没有在DIV中垂直居中

解决思路:如果div和按钮的宽高都确定为具体像素值,可以直接设定按钮的css属性:position:relative; top为(div.height - button.height)/2,left为(div.width-button.height)/2;否则给按钮添加一个div父元素,宽高和按钮相同,position设定为relative,top和left都为50%(即左上角位置设定在外层div的中心),再将按钮左上角位置坐标设定为父元素div宽高(也等于按钮自身宽高)的-50%

详细代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Commpatible" content="IE=edge">
<title>DIV垂直居中对齐</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

body {text-align: center; vertical-align: middle;}
.outer {
	width: 400px;/* 或者为百分比 */
	height: 120px;
	position: relative;
	left: 20px;
	top: 20px;
	border: 1px dashed blue;
}

.inner {
	width: 200px;
	height: 40px;
	position: relative;
	position: relative;
	top: 50%;
	left: 50%;
}

.button {
	width: 200px;
	height: 40px;
	position: relative;
	top: -50%;
	left: -50%;
}
</style>
</head>
<body>
	<div class='outer'>
		<div class='inner'>
			<button class='button'>在DIV中垂直居中</button>
		</div>
	</div>
</body>
</html>

再次运行后,div中按钮上下居中显示

END


本文来源于网络:查看 >
评论
点击刷新
评论
×添加代码片段