CSS垂直居中的6种方法
CSS垂直居中的6种方法
小星星_cjx 发表于7个月前
CSS垂直居中的6种方法
  • 发表于 7个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

1、单行文本垂直居中

html:

<div id="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.child{line-height: 200px}

    垂直居中一张图片

html:

<div class="parent">
    <img src="image.png" alt="">
</div>

css:

.parent{line-height: 200px;border:1px solid #000;}
.parent img{vertical-align: middle}

2、css table 方法

html:

<div class="parent">
    <div class="child">text here</div>
</div>

css:

.parent{display: table;border: 1px solid #000;height: 100px;}
.child{display: table-cell;vertical-align: middle}

 低版本的IE fix bug:

.child{display:inline-block}

3、absolute positioning and negative margin,块级元素

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

 css:

.parent{position:relative;border: 1px solid #000;height: 100px;width: 400px;}
.child{position: absolute;top:50px;left: 200px;height: 30px;width: 50px;
       border: 1px solid #000;margin: -15px 0 0 -25px;}
    

4、absolute positioning  and stretching,通用,>=IE7版本

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.parent{position:relative;border: 1px solid #000;height: 100px;width: 400px;}
.child{position: absolute;top:0;left: 0;right: 0;bottom:0;height: 30px;width: 50px;
       border: 1px solid #000;margin: auto;}
    

 5、equal top and bottom padding,通用

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.parent{padding: 5% 0;border: 1px solid #000;height: 100px;width: 400px;}
.child{padding: 10% 0;height: 30px;width: 50px;border: 1px solid #000;margin: 0 auto;}

6、float div 通用

html:

<div class="parent">
    <div class="floater"></div>
    <div class="child">text here</div>
</div>

css:

.parent{border: 1px solid #000;height: 250px;width: 400px;}
.floater{float: left;height:50%;width: 100%;margin-bottom: -50px;}
.child{clear:both;height: 100px;border:1px solid #000;}

 

共有 人打赏支持
粉丝 0
博文 15
码字总数 10025
×
小星星_cjx
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: