css3中的水平居中方式

1、行内元素居中

 顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。

.div1{
        text-align:center;
    }
<div class="div1">Hello world</div>

 2、块状元素居中

 满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中

.div1{
　　　　 width:200px;
　　　　 border:1px solid red;
        margin:0 auto;
    }
<div class="div1">Hello world</div>

 

转载于:https://www.cnblogs.com/southbean/articles/9876269.html