Detailed explanation of how to vertically center a floating element

How to vertically center a floating element

//Method 1: Know the height and width of the element

#div1{

   

       width: 200px ;

height:200px;

position: absolute; /*The parent element requires relative positioning*/

top: 50%;

left: 50 %;

margin-top:-100px ; /*One-half height, width*/

margin-left: -100px;

}

//Method 2: Height and width of unknown element

#div1{

Width: 200px;

height: 200px;

margin:auto;

position: absolute; /*The parent element requires relative positioning*/

left: 0;

top: 0;

right: 0;

bottom: 0;

}

/*How to vertically center an (use a simpler method.)*/

#container /*’s container settings are as follows*/

{

  display:table-cell;

  text-align:center;

   vertical-align:middle;

}

The above is the detailed content of Detailed explanation of how to vertically center a floating element. For more information, please follow other related articles on the PHP Chinese website!