固定高度和宽度的垂直居中

最新推荐文章于 2021-01-14 10:27:17 发布

原创最新推荐文章于 2021-01-14 10:27:17 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

CSS真的是反反复复看! 温故而知新

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>固定宽度高度的垂直居中</title> 
<style>
.center { 
    height: 200px;
	width:300px;
    border: 3px solid green; 
	position: absolute;
	top:50%;
	left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="center">
  <p>我是水平和垂直居中的。</p>
</div>

</body>
</html>