To center a <div>
horizontally, you can use CSS flexbox. Here's a simple example:
HTML:
<div class="container">
<div class="centered-div">
<!-- Your content here -->
</div>
</div>
CSS:
.container {
display: flex;
justify-content: center;
}
.centered-div {
width: 200px; /* Set the width of your div */
height: 200px; /* Set the height of your div */
background-color: lightgray; /* Set a background color for visibility */
}
In this example, the outer container (<div class="container">
) is a flex container with justify-content: center
, which centers the inner <div>
horizontally. You can adjust the width, height, and other styles of the .centered-div
class to fit your design.
Feel free to ask if you have any questions or need further assistance!