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

阅读原文请点击

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

一、负外边距

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

html代码：

   

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;//当内部内容较多时，会自动出现滚动条}

浏览器显示同上。

阅读原文请点击