css常用技巧 | css水平居中元素 | css垂直居中元素| 浮动模块父元素高度为0

css常用技巧

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

css水平居中一个元素

  • 如果需要居中的元素为常规流中inline元素,为父元素设置text-align: center;即可实现
  • 如果需要居中的元素为常规流中block元素,1)为元素设置宽度,2)设置左右margin为auto。3)IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值
<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
<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
<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
<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-sizeline-height
<p class="text">center text</p>

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

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

<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

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

css

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

方案二

将父元素也设置为浮动的

html

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

方案三

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

html

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

方案四

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

html

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

上面四种方案,方案一比较靠谱,兼容性最强

参考1

参考2

分享到:

发表评论

昵称

沙发空缺中,还不快抢~