css常用技巧

之前写css的时候，总会有一些疑惑，所以需要总结一下，并归纳整理。

css水平居中一个元素

  • 如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现
  • 如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>
  • 如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left或者right）设置为50%，4）浮动方向上的margin设置为元素宽度一半乘以-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

  • 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为50%，3）偏移方向外边距设置为元素宽度一半乘以-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>

  • 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为0,3）设置左右外边距都为auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>

如何竖直居中一个元素

参考资料：6 Methods For Vertical Centering With CSS。 盘点8种CSS实现垂直居中

  • 需要居中元素为单行文本，为包含文本的元素设置大于font-size的line-height：
1
2
3
4
5
6
7
<p class="text">center text</p>

<style>
.text {
    line-height: 200px;
}
</style>
  • 垂直水平居中

看content4使用margin和postition来使用定位，但是必须规定长度或者宽度。在移动端可以配合淘宝的flexiable和rem来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <div class="test4">
        <div class="content4">
            dafdasf
        </div>
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content4 {  
        margin: auto;  
        position: absolute;  
        top: 0; left: 0; bottom: 0; right: 0;  
        height: 100px;
        width: 100px;
    }  
</style>

清除css浮动父元素高度为0

方案一

在浮动元素下面加一个清除浮动的元素:div{clear:both} html

1
2
3
4
<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div

css

1
2
3
4
5
6
.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

方案二

将父元素也设置为浮动的 html

1
2
3
4
<div style="float: left;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

方案三

为父元素显式的设置高度，不推荐 html

1
2
3
4
<div style="height: 400px;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

方案四

为父元素加入overflow:hidded属性或者overflow:auto属性 html

1
2
3
4
<div style="overflow: hidden;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

上面四种方案，方案一比较靠谱，兼容性最强 参考1 参考2