css:如何将box div元素直接置于中心？

Question

当我使用top:50%并且离开:50%

盒子不是直接在中心.当然,当盒子非常小时,它似乎是居中的.但是当盒子有点大时,它看起来好像没有居中.

我怎么解决这个问题？

Answer 1

top并left对应于您的框的左上角.你要做的是让它们与中心相对应.因此,如果您分别设置高度和宽度的一半margin-top并margin-left为负值,您将获得一个居中的框.

300x200盒子的示例:

width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;

Answer 2

使用translate将完美地实现这一点。简单地应用这个

div.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

来源

Answer 3

水平:使用固定宽度和

margin-left: auto;
margin-right: auto;

垂直:那并不容易.你可以用

display: table-cell 

为周围的DIV然后给它一个

vertical-align: middle