通过position使div居中

来源：互联网发布：维启软件编辑：程序博客网时间：2024/06/04 21:46

今天看到一个新的使元素直接居中的方法，是使用position的方式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div{            border:1px solid red;        }        .container{            float: left;            height: 100px;            position: relative;            left: 50%;        }        .box{            float: left;            position: absolute;            left:-50%;        }    </style></head><body style="position: relative;">    <div class="container">        <div class="box">            测试文字是否居中        </div>    </div></body></html>

具体效果如图：
这里写图片描述

在看这段代码的时候有一个疑惑，那就是使用position:relative 方式时，设置的百分比到底是相对谁来的。经过测试发现百分比是根据父元素来的。

基本原理是先让盒子的父标签left:50%，然后给其设置左浮动，设置左浮动可以让其宽度和内容的宽度一致。然后让要居中的元素left: -50%，又因为父元素左浮动后宽度和当前元素的宽度一致，所以再向左偏移 -50% 就会居中。这种居中方式还真是第一见，真的是多读书长见识，哈哈哈。

0 0