绝对定位元素水平垂直居中的两种常见方法

阅读原文请点击

摘要： 一、负外边距 方法：绝对定位元素的尺寸已知，top设置为50%，left设置为50%，外边距margin取负数，大小是宽度width和高度height的一半，有内边距padding时要加上padding值再取半。

一、负外边距

方法：绝对定位元素的尺寸已知，top设置为50%，left设置为50%，外边距margin取负数，大小是宽度width和高度height的一半，有内边距padding时要加上padding值再取半。具体代码如下：

html代码：

<div class="box">
    <div class="box1"></div>
</div>

css代码：

.box{
    position: relative;
    width: 200px;
    height: 200px;
    background: yellow;
}

.box1{
    position: absolute;
    top: 50%;
    left:50%;   
    background: red;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin-top: -60px;
    margin-left: -60px;
}

浏览器显示如下：

除了这种常用方法外，在网上还看到了另一种比较简便的方法，整理如下：

二、利用margin: auto实现居中

方法：设置绝对定位元素top和bottom的值相等，left和right的值相等。但是left和right的值不能超过其相对元素width减去它自身width的一半，否则绝对定位会优先选取left值进行定位。top和bottom无此限制。最好配合overflow：auto防止溢出。具体代码如下：

css代码：

.box1{
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: red;
    overflow: auto;//当内部内容较多时，会自动出现滚动条
}

浏览器显示同上。

阅读原文请点击

转载于:https://my.oschina.net/u/3169476/blog/1522849