How to Center a Div in HTML and CSS?
To center a `<div>` element in HTML and CSS, you can use a combination of CSS properties. Here's a common method to center a `<div>` both horizontally and vertically: ```html <!DOCTYPE html> <html> <head> <style> .centered-div { width: 200px; /* Adjust the width as needed */ height: 200px; /* Adjust the height as needed */ margin: 0 auto; /* Horizontally center the div */ position: absolute; top: 50%; /* Vertically center the div */ left: 50%; transform: translate(-50%, -50%); /* Move the div back by 50% of its own width and height */ background-color: lightgray; text-align: center; /* Center text horizontally within the div */ padding: 20px; /* Add some padding for better appearance */ } </style> </head> <body> <div class="centered-div"> Content goes here </div> </body> </html> ``` In this code: 1. We create a `<div>` element with a cla