GitHub 6740★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Cookie banner

HTML

<div class="cookie-banner">
<!-- Tells visitors that the website uses cookie -->
<div class="cookie-banner__content">
...
</div>

<!-- Close button -->
...
</div>

CSS

.cookie-banner {
/* Banner is displayed at the bottom */
bottom: 0;
left: 0;
position: fixed;
width: 100%;

/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}

.cookie-banner__content {
/* Take available width */
flex: 1;
}
Demo
Follow me on and to get more useful contents.