current position:Home>How to center a floating element vertically

How to center a floating element vertically

2021-08-27 07:04:41 T

How to center a floating element vertically

1. The height and width of known elements

  #div1{
    background-color:#6699FF; 
    width:200px; 
    height:200px; 
    position: absolute; // The parent element needs to be positioned relative  
    top: 50%; 
    left: 50%; 
    margin-top:-100px ; // One in two  height,width 
    margin-left: -100px; 
    } 

2. The height and width of the unknown element

    #div1{ 
      width: 200px; 
      height: 200px; 
      background-color: #6699FF; 
      margin:auto; 
      position: absolute; // The parent element needs to be positioned relative  
      left: 0; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      } 

copyright notice
author[T],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827070440444h.html

Random recommended