Apu June 03, 2023 › #css › #Element

❌

How to center an element horizontally and vertically

In this article,you will learn how you can easily center a element horizontally and vertically.

Center an element using display:flex property.

center a div horizontally & vertically

flex box.

Try it Yourself »

Write Your Answer

back

.noJs { display: flex; justify-content: flex-end; align-items: center; position: fixed; top: 20px; left: 20px; right: 20px; z-index: 99; max-width: 640px; border-radius: 12px; margin: auto; padding: 10px 5px; background-color:#fce8e8; font: small/1.3 'Fira Sans', sans-serif; box-shadow: 0 10px 20px -10px rgba(0,0,0,.1); color: #e51661; } .noJs::before { content: attr(data-text); padding: 0 10px; flex-grow: 1; } .noJs label { flex-shrink: 0; padding: 10px; } .noJs label::after { content: '\2715'; line-height: 18px; font-size: 14px; } .nJs:checked ~ .noJs, .nJs{ display: none; }