css垂直居中

最新推荐文章于 2024-06-23 16:20:36 发布

dream_hai

最新推荐文章于 2024-06-23 16:20:36 发布

阅读量282

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/dream_hai/article/details/52490123

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

固定宽高的div在浏览器居中（cvte在线测评）和单行文字居中，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>center</title>
</head>
<style>
#center{
	position:absolute;
	width:400px;
	height:300px;
	background:#ff0;
	top:calc(50% - 150px);
	left:calc(50% - 200px);
	text-align:center;
	line-height:300px;
}
</style>
<body>
<div id="center">单行文字居中</div>
</body>
</html>

第二种

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种垂直居中</title>
</head>
<style>
#wrapper{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height:240px;
	width:70%;
	background:blue;
}
</style>
<body>
<div id="wrapper">456
</div>
</body>
</html>