zoukankan      html  css  js  c++  java
  • 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>纯CSS制作水平垂直居中“十字架”</title>
        <style>
            body,div{
                margin:0;
                padding:0;
            }
            #box{
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                width:400px;
                height:300px;
                margin:auto;
            }
            #box::before{
                content:"";
                position:absolute;
                left:50%;
                top:0;
                width:30px;
                height:100%;
                margin-left:-15px;
                background-color:pink;
            }
            #box::after{
                content:"";
                position:absolute;
                left:0;
                top:50%;
                width:100%;
                height:30px;
                margin-top:-15px;
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    </html>

    <!-- div默认的宽度是100%,当div绝对定位以后,其宽度是按照div中内容的宽度。 -->

    <!-- 如果需要使用margin让一个盒子水平居中,必须设置盒子的宽 -->

    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    400px;
    height:300px;
    margin:auto;

    先清除这个盒子的top,right,bottom,left值,然后让这个盒子自动根据浏览器的屏幕水平垂直居中。

  • 相关阅读:
    终于回来了&&邮递员送信
    发射站
    黑匣子
    利维坦——(1)
    预告
    整除(水题)
    BZOJ054_移动玩具_KEY
    BZOJ4034_树上操作_KEY
    树链剖分学习&BZOJ1036
    BZOJ1208_宠物收养所_KEY
  • 原文地址:https://www.cnblogs.com/pssp/p/5367524.html
Copyright © 2011-2022 走看看