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 class of "centered-div" for styling.
2. We set the `width` and `height` of the `<div>` to the desired dimensions.
3. `margin: 0 auto;` is used to horizontally center the `<div` in its parent container.
4. `position: absolute;`, `top: 50%;`, and `left: 50%;` are used to position the `<div>` in the vertical and horizontal center of the viewport.
5. `transform: translate(-50%, -50%);` is used to move the `<div>` back by 50% of its own width and height, effectively centering it both horizontally and vertically.
6. We set `background-color` to light gray for illustration purposes.
7. `text-align: center;` and `padding` are used to center text horizontally and add some spacing around the content within the `<div>`.
This method will center the `<div>` both horizontally and vertically within its parent container or the viewport, depending on the context. You can adjust the `width` and `height` values as well as other styles to fit your specific design requirements.