前言

由于最近闲得慌,又不想写作业,就研究起前端来了.拿起HTML想做出office那一套,什么左对齐,右对齐,居中对齐等等...
然后发现,自己根本不会居中对齐这种东西...
遂学之,研究了半天,终于做出来了...

其实原理很简单,主要记住以下3点:

第一点:position:absolute
第二点:left:50%;top:50%
第三点:margin-left:-175px [也就是-(350/2)] margin-top:-150px [也就是-(300/2)]

原理:

先让这个DIV绝对定位;
让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽及高的一半就可以了.

举例:

HTML版本:

<div style="width:350px;height:300px;position:absolute;left:50%;top:50%;
margin-top:-150px;margin-left:-175px;border:solid #000 5px;">
something...
</div>

纯CSS版本:

.center {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

对你有帮助的话,请我喝杯咖啡怎么样