盒子居中效果

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #elementui

动态网页项目开发专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用CSS position属性和transform:translate()方法让div内的p元素水平垂直居中。通过相对定位和绝对定位技巧，实现了一个600x600px红色背景的div中200x200px白色背景的p元素完美居中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>盒子居中效果</title>

</head>

<style>

  div{
    position:relative;

    width:600px;

    height:600px;

    background-color: red;

  }

  p{
    position:absolute;

    width:200px;

    height:200px;

    top:50%;

    left:50%;

    background-color: #fff;

    transform:translate(-50%,-50%);

  }

</style>

<body>

<div>

  <p></p>

</div>

</body>

</html>