那些年 程序员的样子

水平垂直居中

2017-08-16  本文已影响25人  bo_bo_bo_la

问题:怎样实现一个盒子在未知容器里面水平垂直居中?

方法:首先盒子有个宽高,然后给盒子一个定位(相对或者绝对),设置top:50%;left:50%;通常情况下我们会以为top:50%;left:50%;就会是盒子居中,其实并不是。因为盒子是有宽高的,这样只会让盒子的左上角在其父级的中心点上,所以要在设置top 和 left属性之后,让这个盒子的margin-top,margin-left值分别为其本身宽高的一半,并且值为负。代码如下:

div {

width:100px;

height:100px;

border: 1px solid black;

position: relative;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}

上一篇下一篇

猜你喜欢

热点阅读