Trick: centrer en absolut position div

I CSS komplicerer vi nogle gange vores liv med enkle ting, der er mindre komplicerede, end vi tror, og at når vi ser løsningen, griner vi næsten af ​​at observere sådanne anekdoter.

Mere end en person har spurgt mig, hvordan man centrerer en absolut positioneret div, og svaret er meget simpelt:

  1. Vi giver div en fast bredde. Eksempel: 500 px
  2. Vi placerer absolut div med 50% tilbage. Eksempel: position: absolut; venstre: 50%;
  3. Vi trækker halvdelen af, hvad den måler med margenen. Eksempel: margin-left: -250px;

Resultatet er en perfekt centreret, absolut positioneret div.