如何让盒子实现水平和垂直居中

最新推荐文章于 2024-10-04 20:18:28 发布

不易撞的网名

最新推荐文章于 2024-10-04 20:18:28 发布

阅读量182

点赞数

分类专栏：前端文章标签： css3 css html5

本文链接：https://blog.csdn.net/weixin_50569789/article/details/120051094

版权

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

该博客介绍了一种使用CSS3的transform属性，结合相对定位和绝对定位，实现盒子在页面中水平和垂直居中的方法。通过将子元素的position设为absolute，并利用transform: translate(-50%, -50%)，可以轻松达到居中效果。同时，文中还提及了其他一些相关技巧，如使用margin进行调整和对行内元素应用transform的注意事项。

摘要由CSDN通过智能技术生成

让盒子实现水平和垂直居中（CSS3）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让盒子实现水平和垂直居中</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            /*   1.我们translate里面的参数是可以用 % */
            /*  2.如果里面的参数是 % 移动的距离是 盒子自身的宽度或高度来对比 */

            /*  这里的50% 就是50px 因为盒子的宽度是100px  */

            /*   transform: translate(50%); */
        }

        p {
            /*  1.让盒子水平和垂直居中 */
            /* 子绝父相 */
            position: absolute;
            top: 50%;
            left: 50%;
            /*   2.再用margin进行设置   (盒子的一半即可实现水平垂直居中)*/
            /*  margin-top: -100px; */
            /*  margin-left: -100px; */
            width: 200px;
            height: 200px;
            background-color: green;
            /* 3.也可以这样写 */
            transform: translate(-50%, -50%);
        }

        span {
            /*   transform对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>

    <span>123</span>
</body>

</html>