css实用技巧之设置元素居中

CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了。

内联元素居中

水平居中设置:

行内元素 设置 text-align:center;

垂直居中设置:

父元素高度确定的单行文本(内联元素) 设置 height = line-height;

父元素高度确定的多行文本(内联元素)

a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;

 b:先设置 display:table-cell 再设置 vertical-align:middle;

块级元素居中

水平居中设置:

定宽块状元素 设置 左右 margin 值为 auto;

不定宽块状元素

a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;

b:给该元素设置 display:inine 方法;

c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

CSS

 

1

2

3

4

5

6

7

.box{

position:absolute;/*或fixed*/

top:50%;

left:50%;

margin-top:-100px;

margin-left:-200px;

}

2.利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;

CSS

 

1

2

3

4

5

6

7

8

.box{

    position: absolute;或fixed

    top:0;

    right:0;

    bottom:0;

    left:0;

    margin: auto;

}

3.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

HTML代码:

XHTML

 

1

2

3

<div class="box">

    <span>多行文字,此处居中设置</span>

</div>

CSS代码:

CSS

 

1

2

3

4

5

6

7

8

9

10

11

12

.box{

    display:table-cell;

    vertical-align:middle;

    text-align:center;

    width:100px;

    height:120px;

    background:purple;

}

.box span{

    display: inline-block;

    vertical-align: middle;

}

4.使用css3的新属性transform:translate(x,y)属性;

CSS

 

1

2

3

4

5

6

7

8

9

.box{

    position: absolute;

    top:50%;

    left:50%;

    transform: translate(-50%,-50%);

    -webkit-transform:translate(-50%,-50%);

    -moz-transform:translate(-50%,-50%);

    -ms-transform:translate(-50%,-50%);

}

5.最高大上的一种,使用before,after伪元素;

HTML代码:

XHTML

 

1

2

3

4

5

<div class='box'>

    <div class='content'>

        垂直居中

    </div>

</div>

CSS代码:

CSS

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.box{

    position:fixed;

    display:block;

    background:rgba(0,0,0,.5);

}

.box:before{

    content:'';

    display:inline-block;

    vertical-align:middle;

    height:100%;

}

.box:after{

    content:'';

    display:inline-block;

    vertical-align:middle;

    height:100%;

}

.box .content{

    width:60px;

    height:60px;

    line-height:60px;

    color:red;

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值