Kevin Powell - Community•6mo ago

Centering a div

Hello, I'm having a hard time centering this overflowing div. https://codepen.io/Suggon/pen/wvbrRqa?editors=1100 Is there a specific property that can help achieve this? (please note that the inset-based centering is important for my usecase)

2 Replies

Chris Bolson•6mo ago

You could do something like this:

.container .text {
    position: absolute;
    inset: 0 50%;
    width: 100%;
    margin: auto;
    transform: translateX(-50%);
    height: 2lh;
    outline: 2px solid red;
    border-radius: 3px;
}

.container .text {
    position: absolute;
    inset: 0 50%;
    width: 100%;
    margin: auto;
    transform: translateX(-50%);
    height: 2lh;
    outline: 2px solid red;
    border-radius: 3px;
}

SuggonOP•6mo ago

ooh that's a nice solution! although it has a tiny issue where smaller divs always take container's full with, fits my usecase regardless thank you! update: just realized all divs already take full width regardless of size, because of inset 🤦 with that out of the way, yes it's the perfect solution 👍

Gaming

Programming

Centering a div