水平居中和垂直居中

Posted 2021-05-07 rickdiculous

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了水平居中和垂直居中相关的知识，希望对你有一定的参考价值。

技术图片

<!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;
                    width: 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>

以上是关于水平居中和垂直居中的主要内容，如果未能解决你的问题，请参考以下文章

html能设置图片水平和垂直居中吗？

怎么使用CSS让图片水平垂直都居中？

css html 如何将图片img标签水平居中垂直居中和水平垂直居中

android 代码中设置控件的垂直居中和两个控件之间的距离。

如何使文字在div中水平和垂直居中的css代码