我是一个前端的菜鸟,对于绝对居中前几天也困惑了我不少时间,今天我就把我知道的两个方法写出来,希望能记住也希望帮助到和我一样刚接触前端不久的同学。
第一种是 你需要居中的元素有固定的宽高:
首先给他的父元素一个相对定位的属性:position: relative;
然后给需要定位的元素加上属性:
width: 100px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -100px;
简单的来说就是以宽高的50%来定位,然后减去它自身多出来的一半。
第二种就是 你需要居中的元素 没有 固定的宽高,那样的话你就没法减去他多出来的一半了,那怎么做呢?请看:
首先还是给他的父元素一个相对定位的属性:position: relative;
然后给需要定位的元素加上属性:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
当然,如果他不是块状元素的话,还要加上:display: block;
来源: