To achieve center alignment both horizontally and vertically for your inner <div>, you can use the following CSS styles:
.outer-div {
display: flex;
justify-content: center;
align-items: center;
}
.inner-div {
/* Additional styles for inner div */
}
This will center the inner <div> both horizontally and vertically within the outer <div>. Now, let's add a CSS animation to make the inner <div> fade in when the page loads.
You can achieve a fade-in animation using CSS transitions. Add the following CSS styles to your .inner-div class:
.inner-div {
opacity: 0; /* Set initial opacity to 0 */
transition: opacity 1s; /* Smooth transition for opacity change over 1 second */
}
.inner-div.show {
opacity: 1; /* Change opacity to 1 for fade-in effect */
}
To trigger the fade-in effect when the page loads, you can use a small JavaScript snippet:
document.addEventListener("DOMContentLoaded", function() {
const innerDiv = document.querySelector('.inner-div');
innerDiv.classList.add('show');
});
Make sure you add the .show class to the inner-div element after the page loads to trigger the fade-in animation. Adjust the transition duration (1s in this example) to your desired speed.
Combine these CSS styles and JavaScript snippet with your existing HTML structure to achieve the desired centering and fade-in animation effect for the inner <div>. Feel free to reach out if you need further assistance or clarification.