常见的CSS文字居中显示

前端博客：执行上下文用故事与酒分享前端的乐趣-公众号：执行上下文 Github-卖坚果的怪叔叔常见的CSS文字居中显示八种让人眼前一亮的CSS Hover效果

常见的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;
               }