常见的CSS文字居中显示

1、利用line-height和vertical-align实现

利用line-height和vertical-align实现
               .center {
                  vertical-align: middle;
                  line-height: 200px;
                  text-align: center;
               }
            

2、利用display:table-cell实现水平垂直居中显示

利用display:table-cell实现水平垂直居中显示
               .table{
                  display: table;
               }
               .cell{
                  display: table-cell;
                  vertical-align: middle;
                  text-align: center;
               }
            

3、利用定位方式position+transform实现水平垂直居中显示

利用定位方式position+transform实现水平垂直居中显示
               .vc {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
               }
            

4、利用display:flex

利用display:flex
               .flex{
                  display:flex;
                  flex-direction: row; 
                  justify-content: space-around;
                  align-items: center;
               }
            

5、利用display:box

利用display:box
               .box {
                  display: -webkit-box;
                  -webkit-box-orient: horizontal;
                  -webkit-box-pack: center;
                  -webkit-box-align: center;
               }
            
已有人光临!!