上海11选5走势图

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属性。



关键词:
返回列表

上海11选5走势图相关的文章

相关案例

上海11选5走势图 极速彩票APP 易玩棋牌 悠洋棋牌APP下载 悠洋棋牌 上海11选5分布走势图 上海11选5走势图 悠洋棋牌 悠洋棋牌 上海11选5