zoukankan      html  css  js  c++  java
  • 元素水平垂直居中的几种常用方法

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>元素水平垂直居中</title>
            <style>
                /*方式一*/
                .box{
                    width: 100px;
                    height: 100px;
                    background: red;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -50px;
                    margin-top: -50px;
                }
                /*方式二*/
                .box{
                    width: 100px;
                    height: 100px;
                    background: red;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50px,-50px);
                    /*或者transform: translate(-50%,-50%);*/
                }
                /*方式三  技巧*/
                .box{
                    width: 100px;
                    height: 100px;
                    background: red;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin:auto;
                }
                /*方式四  弹性盒*/
                .father{
                    display: flex;
                    width: 400px;
                    height: 400px;
                    background: red;
                    justify-content: center;
                    align-items: center;
                }
                .son{
                    width: 100px;
                    height: 100px;
                    background: aqua;
                }
            </style>
        </head>
        <body>
            <div class="box">我需要用多种方式居中你</div>
            <div class="father">
                <div class="son"></div>
            </div>
        </body>
    </html>
  • 相关阅读:
    odoo service error 更改端口号
    unique 唯一约束
    odoo 注册失败
    odoo 某个字段权限设置
    linux 定时任务
    odoo webside theme
    js 杂记
    vue3入门总结
    vue输出空格
    css等比例缩放图片
  • 原文地址:https://www.cnblogs.com/lhl66/p/8724939.html
Copyright © 2011-2022 走看看