css垂直居中(二)

時間 2019-11-17

標籤 css 垂直居中欄目 CSS 简体版

原文原文鏈接

　　　　一：利用Flex佈局css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .demo{
                width:150px;
                height:200px;
                border:1px solid pink;
                font-size:16px;
            }
            .demo-flex{
                display:flex;
                align-items:center;
                justify-content: center;
                flex-direction:column;
            }
        </style>
    </head>
    <body>
        <div id="" class="demo demo-flex">
            <span>測試文字測試文字</span>
        </div>
        
    </body>
</html>

　　　　二：line-heighthtml

　　　　　　1. div + p （塊級元素）：佈局

　　　　　　子元素寬高設置：測試

　　　　　　當子元素沒有設置寬高時, 元素的寬高會默認和父級塊元素的一致；當元素有本身的寬高時，不會繼承父元素的寬高；字體

　　　　　　2. 行間距設置：flex

　　　　　　設置子元素的垂直居中效果，能夠直接設置父元素的 line-height == height ，或者設置子元素的 line-height == 父元素的 height 。spa

　　　　ps：當子元素的字體太大，而其行間距又過小時，字體會貼緊容器頂部，若是不能容下字體，字體會有部分超出容器頂部。code

　　　　　　1. div + span （行內元素）：orm

　　　　　　　子元素寬高設置：很遺憾對於行內元素來講，是沒法設置的。htm

　　　　　　2. 行間距設置：

　　　　　　設置子元素的垂直居中效果，能夠直接設置父元素的 line-height == height ，或者設置子元素的 line-height == 父元素的 height 。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .demo{
                width:200px;
                height:120px;
                border:1px solid pink;
                text-align:center;
            }
            .demo-flex{
                line-height:120px;
            }
        </style>
    </head>
    <body>
        <div id="" class="demo demo-flex">
            <span>測試文字測試文字</span>
        </div>
        
    </body>
</html>

　　　　注意：line-height 這個只能在單行文本中使用

　　　　三：利用position 定位來實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .demo{
                position:relative;
                width:200px;
                height:120px;
                border:1px solid pink;
                text-align:center;
            }
            /* 定位方法一： */
            .remind{
                position:absolute;
                left:50%;
                top:50%;
                transform:translate(-50%,-50%) ;
            }
            
            /*  定位方法二*/
            .remind{
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin:auto 0;
                height:0;
            }
            
        </style>
    </head>
    <body>
        <div id="" class="demo demo-flex">
            <p class="remind">測試文字測試文字</p>
        </div>
        
    </body>
</html>

　　　　四：利用vertical-align實現居中

　　　　vertical-align 屬性設置元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .demo{
                width:200px;
                height:120px;
                border:1px solid pink;
                text-align:center;
            }
            .demo:before{    /* 僞元素 */
                content:"";
                display:inline-block;
                height:100%;
                width:1%;
                vertical-align:middle;
            }
            .remind{
                vertical-align:middle;
            }
            
        </style>
    </head>
    <body>
        <div id="" class="demo demo-flex">
            <span>測試文字測試文字</span>
        </div>
        
    </body>
</html>

　　　　即在父容器內放一個100%高度的僞元素，讓文本和僞元素垂直對齊，從而達到垂直居中的目的。

1. css垂直居中
2. CSS 垂直居中
3. # css垂直居中
4. CSS垂直居中
5. css 垂直居中
6. css水平居中垂直居中水平垂直居中
7. CSS水平居中+垂直居中+水平垂直居中
8. CSS-水平居中、垂直居中、水平垂直居中
9. css的垂直居中
10. css圖片垂直居中
更多相關文章...
• PHP imagecharup - 垂直地畫一個字符 - PHP參考手冊
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• RxJava操作符（二）Transforming Observables
• Scala 中文亂碼解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。