css使元素居中显示

今天文汇建站公司的小编给 大家带来两种元素居中的方式,可根据网 站的具体情况进行选择使用。

一、已知宽度的元素居中

思路:居中元素 父级设置相对定位,居中元素绝对定位,距离顶部 top:50%,左边left:50%,通过margin-top、margin-left等于负的 居中元素宽高的一半。

<style>

    .box{position:relative;width:200px;height:300px;}

    .a{position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-100px;}

</style>

<div class="box">

    <div class="a"></div>

</div>

二、未知宽度的元素居中

思路:居中元素 父级设置相对定位,居中元素绝对定位,距离顶部 top:50%,左边left:50%,然后使用css3 transform:translate(-50%; -50%)使元素居中。

<style>

    .box{position:relative;width:200px;height:300px;}

    .a{position:absolute;top:50%;left:50%;margin-top:-150px;transform:translate(-50%; -50%);}

</style>

<div class="box">

    <div class="a"></div>

</div>

虽然第二 种方式更为便捷简单,但IE9以下不支持transform属性。



关键词:
返回列表

相关文章

相关案例

友情链接:    九万彩票---首页_欢迎您   长江彩票_信誉平台   开奖网-首页   uc彩游戏---首页_欢迎您   彩客网---首页_欢迎您