Cacher is the code snippet organizer for pro developers

DIV

<div>
-
</div>

CSS div-top

div {
  position: absolute;
    left: 50%;
    top: 50%;
    border-top: solid 2px black;
    border-left: solid 2px black;
}

top/left的这个概念是相对于tag的border端, 所以仔细看的话能发现整体没居中, 但是border是完全居中的.

CSS div-transform

    div {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-top: solid 2px black;
        border-left: solid 2px black;
    }

transform: translate()是以tag中心为标准, 所以-50%,-50%保证了top/left的border定位