居中方法_html/css_WEB-ITnose

今天在写网页时发现居中是个让人头痛的事，所以我通过网上和自己的用法来总结我目前所知的解决居中问题的办法：

1.text-align: center

需要在父元素上设定,只能是文字或行内元素而且不能是浮动元素

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

　　

2.margin：0 auto

需要在子元素上设定，只能是块级元素而且不能是浮动元素

.div2 div{            margin: 0 auto;        }<div class="div2">    <div>        <p>margin</p>    </div></div>

3.line-height

需要在父元素上设定,只能是文字和行内元素

.div3{            line-height: 200px;        }<div class="div3">    <span>line-height</span></div>

4.position

首先给父元素和子元素分别写上positon定位，再给父元素和子元素设定宽高，
然后给子元素再写上top:50%;left:50%;以及margin-top:一半的height值的的负数;
margin-left:一半的weight值的负数。（原理是先把子元素定位在父元素宽高的50%上，再减去子元素宽高的
一半）

.div4{            position:relative;        }        .div4 div{            /*float: left;*/            width:100px;            height:80px;            position:absolute;            top:50%;left:50%;            margin-left:-50px;            margin-top:-40px        }<div class="div4">    <div>        <p>            position        </p>    </div></div>

5.inline-block

父元素设定text-align:center，其下元素设定display: inline-block可以进行居中（让其对父元素是行内元素，对自身是块级元素）

.div5{            text-align: center;        }        .div5 div{            display: inline-block;        }<div class="div5">    <div>        <p>            inline-block        </p>    </div></div>