I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items
, align-content
, and even text-align
, but none of them seem to work. I am unsure if there is another option I'm missing.
/* CSS Styles */
body {
background: #212121;
margin: 0;
}
.card {
align-items: center;
width: 210px;
height: 254px;
border-radius: 4px;
background: #212121;
display: flex;
gap: 5px;
padding: .4em;
}
/* More CSS styles... */
<!-- HTML Markup -->
<!-- HTML content -->
Could someone please advise me on how to properly center the div?