1. 程式人生 > >關於一個div上下左右居中的css方法

關於一個div上下左右居中的css方法

url 定位 居中 gif height left right red web

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方法