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

最新推荐文章于 2021-01-17 05:46:34 发布

LPLIFE

最新推荐文章于 2021-01-17 05:46:34 发布

阅读量175

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/LPLIFE/article/details/83592563

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LPLIFE

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定高度和宽度的垂直居中

CSS真的是反反复复看! 温故而知新 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt; &lt;title&gt;固定宽度高度的垂直居中&lt;/title&gt; &lt;style&gt;.center { height: 200px; width
复制链接

扫一扫