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.