加拿大28

  • <tr id='ilfmg'><strong id='ilfmg'></strong><small id='ilfmg'></small><button id='ilfmg'></button><li id='ilfmg'><noscript id='ilfmg'><big id='ilfmg'></big><dt id='ilfmg'></dt></noscript></li></tr><ol id='ilfmg'><option id='ilfmg'><table id='ilfmg'><blockquote id='ilfmg'><tbody id='ilfmg'></tbody></blockquote></table></option></ol><u id='ilfmg'></u><kbd id='ilfmg'><kbd id='ilfmg'></kbd></kbd>

    <code id='ilfmg'><strong id='ilfmg'></strong></code>

    <fieldset id='ilfmg'></fieldset>
          <span id='ilfmg'></span>

              <ins id='ilfmg'></ins>
              <acronym id='ilfmg'><em id='ilfmg'></em><td id='ilfmg'><div id='ilfmg'></div></td></acronym><address id='ilfmg'><big id='ilfmg'><big id='ilfmg'></big><legend id='ilfmg'></legend></big></address>

              <i id='ilfmg'><div id='ilfmg'><ins id='ilfmg'></ins></div></i>
              <i id='ilfmg'></i>
            1. <dl id='ilfmg'></dl>
              1. 您好,欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题
                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://bayitaku.com/article/detail_4584326.html

                相关图片

                相关文章