Hacker News new | ask | show | jobs
by blondin 1641 days ago
wait. flex-based layout has not fixed centering.

nothing which has been done since table-based layout has an intuitive and cross-browser way for doing vertical and horizontal centering. that's what i think GP meant.

i do not want to see tables back but i do admit that they did exactly, and intuitively, what you would expect of them.

2 comments

???

.box { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; }

.box div { width: 100px; height: 100px; }

<div class="box"> <div>this is centered vertically and horizontally</div> </div>

also, using tables for layout isn't semantically correct. it's like using `map` as a for loop. also, consider folks with disabilities who rely on screen readers.

Centering has been an easily solved problem with both flex and grid for years. If you’re having trouble with conflicting styles, you can revert them with, well, revert. You can even revert all of them with revert: all. But I don’t recommend that. If you’re still having trouble centering things I’d recommend getting familiar with the cascade and removing styles that conflict with what you’re centering.
Can’t edit now but I’d be remiss if I didn’t correct myself. You can revert all styles with `all: revert`, but I still don’t recommend that.