CSS 水平居中相对定位与负边距法-百分百源码网

CSS 水平居中相对定位与负边距法

发布时间：01/15 来源：浏览：关键词：

本文章标题讲述了三个点就是css实现水平居中,相对定位,负边距法这三种做法，下面我来给大空介绍一个实例，然后再一一分析。

代码如下

        <title>DIV 水平居中</title>
        <style>
            div#wrap {
                position: relative;
                width: 760px;
                left: 50%;
                margin-left: -380px;
                border: 1px solid #333;
                background-color: #ccc;
            }
        </style>

        <div id="wrap">
            <p>
                这是一个p标签里的元素
            </p>
        </div>

分析

position: relative; 是相对定位，就是相对于当前级的父级
left: 50%; 居中的意思(居中的元素相对于其原来位置向右移个50%)
margin-left: -380px; 负边距法 (看元素已经放在了页面的中间位置，但是并未居中。居中呢就是整个元素的中心点正好与页面的中心线重叠。于是我再将元素margin-left改为其宽度的一半，当然为了往左挪这个偏移量是负数)

打赏