DIV水平和垂直居中的实现

在div的宽度和高度固定的情况下，实现div水平和垂直居中普遍采用如下的方式：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .mydiv{
        width: 400px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -200px;
        background-color: black;
    }
</style>
</head>
<body>
    <div class="mydiv">
    </div>
</body>
</html>

1.利用定位使div的起始位置处于界面的中心，即div的左上角处于界面的中心点

position: absolute;

left: 50%;

top: 50%;

2.然后利用外边距属性上移和左移div高度和宽度的一半

margin: -150px 0 0 -200px;

补充：

1.CSS让DIV水平居中

让一个DIV水平居中。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。

.mydiv{
    margin:0 auto;
    width:400px;
    height:300px;
    background: black;
}

2.负margin属性介绍

如果使用得当，负margin是非常强大的属性，以下是2种（负margin占主导位置）的场景。

一、作用于static元素上的负margin属性

Static元素是没有设定成浮动的元素，下图说明了负margin对static元素的作用

当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。

例如：

/* 元素向上移10px*/
#mydiv{
    margin-top:-10px;
}

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

例如：

/*mydiv后续元素向上移10px, mydiv本身不移动*/
#mydiv {
    margin-bottom:-10px;
}

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

二、浮动元素上的负margin
考虑下以下这种情况

HTML代码:

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。

/* 应用在与浮动相反方向的负margin */
#mydiv{
    float:left;
    margin-right:-100px;
}

若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。

如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。

巴特西

DIV水平和垂直居中的实现

最新文章

热门文章