首页 > 代码库 > 关于一个div上下左右居中的css方法

关于一个div上下左右居中的css方法

1:通过position:absolute定位,上下左右的值都设为0,margin:auto;需要知道div的宽高

{
width: 64px;
height: 64px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

2:需要知道div的宽高,通过定位移动的页面的宽高一半的位置,再通过margin-top和margin-left的移动该div的宽高度的一般即可实现;

{

width: 64px;
height: 64px;
border: 1px solid red;
background-image: url(img/g2.gif);
background-size:100% 100% ;
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;

}

3 未知div的宽高。由div的内容撑起来

{

border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}

 

关于一个div上下左右居中的css方法