小技巧-css绝对定位-使块级元素在某区域垂直和水平居中。

最新推荐文章于 2024-05-18 16:20:54 发布

愿无岁月可回首i

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量504

点赞数

分类专栏：基础知识小技巧-css 文章标签： css 基础知识

基础知识同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

小技巧-css

2 篇文章 0 订阅

订阅专栏

<html>
 <head>
  <style>
   div{
width:500px;
height:500px;
border:1px solid black;
position:relative;
}
   p{
width:200px;
height:200px;
border:1px solid red;
position:absolute;
top:0;

right:0;

bottom:0;

left:0;
}
  </style>
 </head>
 <body>
  <div>
   <p></p>
  </div>
 </body>
</html>

给子块级元素设置绝对定位，各个偏移量设置为0，原理是让居中元素即往左又往右，即往上又往下，此时块级元素就会不知道往哪里定位，乖乖呆在正中间。

免去设置百分比，计算外边距等，实现元素的垂直和水平居中，居中元素也可以设置百分的宽高，实现动态居中。

优惠劵

愿无岁月可回首i

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小技巧-css绝对定位-使块级元素在某区域垂直和水平居中。

div{ width:500px; height:500px; border:1px solid black; position:relative;} p{ width:200px; height:200px; border:1px solid red; position:absolute; top,right,bottom,left:0; }
复制链接

扫一扫