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 中文乱码解决