Jak ustawić padding, żeby nie zwiększał wysokości diva?

pytanie zadane 8 marca 2023 w HTML i CSS przez Iei Obywatel (1,950 p.)

<!DOCTYPE html>
<head>
	<style> #outer {
	 position: absolute;
     left: 0px;
     top: 0px;
     width: 800px;
     height: 400px;
     background: lightgreen;
     text-align: center;
     padding-top: 70px;
 }
    </style>
</head>
<body>
	<div id="outer">
		<button>Button</button>
	</div>
</body>

W jaki sposób można ustawić padding-top, żeby nie zwiększała się wysokość diva? Chodzi mi o to, żeby button był dokładnie na środku diva, poziomo jak i pionowo. Jeśli chodzi o ustawienie pionowo, myślałem żeby obliczyć wysokość diva za pomocą javascriptu, podzielić ją na 2 i zmodyfikować dynamicznie wartość padding-top, ale nie chcę żeby zwiększała się przy tym wysokość diva

1 odpowiedź

odpowiedź 8 marca 2023 przez VBService Ekspert (253,420 p.)
edycja 8 marca 2023 przez VBService

Najlepsza

Chodzi mi o to, żeby button był dokładnie na środku diva

Możesz to zrobić bez używania padding-a, za pomocą np.
transform: translate

[ on-line ]

    button {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

lub np. za pomocą: flex

[ on-line ]

    #outer {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 800px;
      height: 400px;
      background: lightgreen;
      text-align: center;
    }

lub za pomocą: grid

[ on-line ] [ on-line ]

    #outer {
      display: grid;
      place-items: center;
      width: 800px;
      height: 400px;
      background: lightgreen;
    }

W ramach ciekawostki

za pomocą: line-height

[ on-line ]

    #outer {
      --height: 400px;
      width: 800px;
      height: var(--height);
      background: lightgreen;
      text-align: center;
      line-height: var(--height);
    }

za pomocą: display: table-cell

[ on-line ]

    #outer {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width: 800px;
      height: 400px;
      background: lightgreen;
    }

a tu ciekawostka w ramach ciekawostek

za pomocą: margin

[ on-line ]

    button {
      --width: 4em;
      width: var(--width);
      margin: 25% calc(50% - (var(--width) / 2));
    }

Jednakże, ten sposób nie jest idealny, ponieważ wartość marginesu jest ustawiona ręcznie i może to prowadzić do problemów z responsywnością, szczególnie jeśli elementy mają zmieniać swoje rozmiary w zależności od rozdzielczości ekranu lub innych czynników. W takich przypadkach lepszym rozwiązaniem jest użycie technik wykorzystujących flex lub grid, które zapewniają bardziej elastyczne i responsywne podejście do wyśrodkowania elementów na stronie.