zoukankan      html  css  js  c++  java
  • 水平居中和垂直居中

    水平居中:
    1、针对文字:text-align
    2、针对已知宽高块级容器:margin-left、margin-right
    3、不知道宽高:position+translate
    4、终极解决方案(文字和容器均可):flex布局


    垂直居中:
    1、固定高度的单行文本:line-height
    2、不知道宽高:position+margin-top(知道高度的px)/translate
    3、flex(推荐)


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>2.5 水平居中和垂直居中</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                    box-sizing: border-box;
                }
                .modal-wrapper{
                    position: fixed;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 1000;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.4);
                    
                    /* display: flex;
                    justify-content: center;
                    align-items: center; */
                }
                .modal{
                    overflow: hidden;
                    background-color: #fff;
                    border-radius: 10px;
                    font-size: 16px;
                
                
                /* 情况1:容器宽高自适应 没有指定宽高 内容撑开 */
                    /* 1-1 内联元素 不能设置宽高 内容撑开 */
                        /* 1-1-1 文字水平垂直居中 多行文字 */
                        /* display:inline; */
                        /* padding:0 20px; */  /* 这种情况可以不考虑垂直水平居中 */
                  
                        /* 1-1-2 容器水平垂直居中 内联元素 */
                        /* position: absolute; */
                        /* left: 50%; */
                        /* top: 50%; */
                        /* transform: translate(-50%,-50%); */
                 
                    /* 1-2 内联块元素 不能设置宽高 内容撑开 */
                        /* 1-2-1 文字水平垂直居中 多行文字 */
                        /* display: inline-block;
                        padding: 30px 20px; */
                  
                        /* 1-2-2 容器水平垂直居中 内联块元素 */
                        /* position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%); */
                 
                    /* 1-3 块元素 不能设置宽高 */
                        /* 1-3-1 文字水平垂直居中 多行文字 */
                        /* display: block;
                        text-align: center;
                        padding: 30px 0; */
                  
                        /* 1-3-2 容器水平垂直居中 块元素 */
                        /* position: absolute;
                        display: inline-block;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%); */
                 
                /* 情况2:指定容器宽高 */
                    /* 2-1 内联元素 不能设置宽高 内容撑开 */
                    
                    
                    /* 2-2 内联块元素 设置宽高 */
                        /* 2-2-1 文字水平垂直居中 多行文字 */
                        /* 也可以写flex布局使文字垂直水平居中 */
                        /* display: inline-block;
                         300px;
                        height: 100px; */
                        /* 单行文字 */
                        /* text-align: center;
                        line-height: 100px; */
                        /* 多行文字 */
                        /* display: flex;
                        justify-content: center;
                        align-items: center; */
                        
                        
                        /* 2-2-2 容器本身 水平垂直居中 内联块元素 */
                        /* position: absolute; */
                        /* left: 50%; */
                        /* top: 50%; */
                        /* 不知道宽高 */
                        /* transform: translate(-50%,-50%); */
                        /* 知道宽高 */
                        /* margin-left: -150px;
                        margin-top: -50px; */
                        
                    /* 2-3 块元素 设置宽高 */
                        /* 2-3-1 文字水平垂直居中 多行文字 */
                        display: block;
                        width: 300px;
                        height: 100px;
                        /* 单行文字 */
                        text-align: center;
                        line-height: 100px;
                        /* 多行文字 */
                        /* display: flex;
                        align-items: center;
                        justify-content: center;
                         */
                        /* 2-3-2 容器水平垂直居中 块元素 */
                        /* margin: 0 auto; */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                        margin-left: -150px;
                        margin-top: -150px;
                }
            </style>
        </head>
        <body>
            <div class="modal-wrapper">
                <span class="modal">单行文字水平垂直居中</span>
            </div>
            
        </body>
    </html>
  • 相关阅读:
    SQL server 2005 创建数据库失败提示“Collation <服务器默认值> is not valid”解决方法
    ACM PKU 1011 Sticks 深度优先搜索
    pku1088 滑雪
    javascript 使用金山词霸网络翻译
    JQuery基础 document.ready
    遍历aspx页面中所有的指定控件
    DataTable,DataView和DataGrid中一些容易混淆的概念
    C#中的DBNull、Null、和String.Empty解释
    哈佛大学管训
    美国教育考试中心公布2010年托业考试时间表
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11644967.html
Copyright © 2011-2022 走看看