欢迎光临
我们一直在努力

css 左右居中、上下居中方式

左右居中 方式一:文本在div中左右居中

<div style="text-align:center;">
     这个要居中
</div>

左右居中 方式二: div在容器中居中

<div style="width:1000px;">
        <div style="width:100px; margin:0 auto;">这个要居中</div>
</div>

上下居中方式一:div在容器中上下居中

<div style="width:1000px;height:600px; background-color:yellow;border:1px;margin:0;padding:0;">
        <div style="width:100px; margin:0 auto; height:30px; background-color:red;position:relative; top:50%; margin-top:-15px;">这个要居中</div>
    </div>

主要讲一下上面这种居中的原理,主要是通过position:relative; 让元素可以通过top、left来定位。所以我们用top定位50%,这样会因为元素自身高度让元素偏下,把我们需要用margin-top 把元素移上去一点,具体数值是当前元素高度的一半。关键代码如下

position:relative; 
top:50%; 
margin-top:-15px;
赞(0)
未经允许不得转载:自游互动 » css 左右居中、上下居中方式
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们