元素居中

一、行内元素水平居中

  text-align: center;

二、行内元素垂直居中

  height: 40px;line-height: 40px;    让这两个值相等

三、块级元素水平居中

 width: 300px; margin: 0 auto;     可以不设置高度

三、块级元素垂直居中

  1.固定宽高块级元素垂直居中

    

1
2
3
4
5
6
7
8
9
10
11
    div{ width200px;
height100px;
line-height100px;
border1px solid #000;
text-aligncenter;
positionabsolute;
left50%;
top50%;
        margin-left-100px;
margin-top-50px;
    }   

  2.宽高是百分比的块级元素垂直居中

    

1
2
3
4
5
6
7
8
9
div{
       width10%;
height30%;
positionabsolute;
left0;
top0;
bottom0;
right0;
marginauto;   <br>}    

  3.宽高不固定的块级元素垂直居中

    

1
2
3
4
5
6
7
8
9
10
11
12
div{
      
transform: translate(-50%,-50%);/*此时的百分数是以自身的宽高为参考*/
/*width: 1500px;
 
height: 300px;*/
 
/*width: 300px;*/
 
width30%;
 
heightauto;       
posted @ 2017-03-30 08:47  夜雨声烦丶  阅读(122)  评论(0编辑  收藏  举报