常见的几种CSS水平垂直居中解决办法_html/css_WEB-ITnose

用CSS实现元素的水平居中，比较简单，可以设置text-align center，或者设置 margin-left:auto; margin-right:auto 之类的即可。

主要麻烦的地方还是在垂直居中的处理上，所以接下来主要考虑垂直方向上的居中实现。

水平垂直居中主要包括三类：基本文本类，图像类，其他元素类

但，也是由一些方法可以实现的，下面就来谈谈了解到的10中方法。

方法一、使用 line-height

这种方式更多地用在 单行文字的情况,其中使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了

     html,body,div {margin: 0;padding: 0}    .box {         margin: 20px auto;        width: 200px;        height: 200px;                background: #ddf;    }    .content {         line-height: 200px;        text-align: center;　　     overflow: hidden;    } 
    
        This is text

      
查看更多关于常见的几种CSS水平垂直居中解决办法_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did109244