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

- 日理万妓 2023-10-03 15:45 53阅读 0赞

## 让盒子实现水平和垂直居中（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>