利用负margin实现元素居中

Posted 2020-09-27 wincent98

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用负margin实现元素居中相关的知识，希望对你有一定的参考价值。

原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父元素的中心.

负margin特性:负的margin-top,margin-left将当前元素往上/左拉,覆盖其他元素;

负的margin-bottom,margin-right将当前元素的后续元素往上/左拉,覆盖当前元素;

例如:

<!DOCTYPE html> 
<htm>
<head>
    <title></title>
    <style type="text/css">
        #father
        {
            position:relative;
            width:200px;
            height:160px;
            border:1px dashed gray;
        }
        #son
        {
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-30px;
            margin-left:-50px;
            width:100px;
            height:60px;
            background-color:Red;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

　　在这个例子中,先利用position定位使#son的左上角位于#father的中心,再设置#son的margin-top,margin-left为其自身height/width的一般的负值,这样就轻松将其中心移至父元素中心.

以上是关于利用负margin实现元素居中的主要内容，如果未能解决你的问题，请参考以下文章

CSS实现垂直居中的5种方法

将一个不定宽高的盒子设置水平垂直居中的六种方法