实现盒子居中效果

富江¢

于 2022-05-19 23:21:28 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_58235030/article/details/124874087

本文详细介绍了如何使用HTML和CSS的绝对定位属性来创建一个响应式的图文布局，重点讲解了`<p>`元素在`<div>`中的居中对齐技巧，适合前端开发者学习定位原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        position: relative;         /*相对定位*/
        width: 500px;
        height: 500px;
        background-color: #5bb5e2;
      }
      p{
        position: absolute;     /*绝对定位*/
        width: 150px;
        height: 150px;
        background-color: #eab9d2;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);    /*减自身高度，宽度的一半*/
        margin: 0 auto;
      }
    </style>
</head>
<body>
  <div>
    <p></p >
  </div>
</body>
</html>

在这里插入图片描述