ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> 6种不同的CSS实现垂直水平居中

6种不同的CSS实现垂直水平居中

来源:网络整理     时间:2018-08-19     关键词:

本篇文章主要介绍了" 6种不同的CSS实现垂直水平居中",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 6种不同的CSS实现垂直水平居中:<!DOCTYPE html><html><head><meta chars...

    6种不同的CSS实现垂直水平居中:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Analytics Model</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #cccccc; 
            margin-top: 10px;
        }

        .box1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;      
        }
        .box1 span{
            display: inline-block;
        }

        .box2{
            display: flex;
            justify-content:center;
            flex-direction:column;
            text-align: center;
        }

        .box3{position:relative;}
        .box3 div{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }
        .box3 span{
            display: inline-block;
        }


        .box4{
            text-align:center;
            font-size:0;
        }
        .box4 div{
            vertical-align:middle;
            display:inline-block;
            font-size:16px;
        }
        .box4 span{
            display: inline-block;
        }
        .box4:after{
            content:'';
            width:0;
            height:100%;
            display:inline-block;
            vertical-align:middle;
        }


        .box5{
            display: flex;
            text-align: center;
        }
        .box5 div{
            margin: auto;
        }
        .box5 span{
            display: inline-block;
        }



        .box6{
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
            -webkit-box-orient: vertical;
            text-align: center;
        }
        .box6 span{
            display: inline-block;
        }

    </style>
</head>
<body>
<div>
        <span>1垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

<div>
        <span>2垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

<div>
    <div>
        <span>3垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>


<div>
    <div>
        <span>4垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>


<div>
    <div>
        <span>5垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>

<div>
        <span>6垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

</body>
</html>

以上就介绍了 6种不同的CSS实现垂直水平居中,包括了方面的内容,希望对web前端有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_4584326.html

相关图片

相关文章