There are several ways to center a div horizontally and vertically with CSS:

1. Using flexbox:

css
Open in Editor
1.container { 
2  display: flex; 
3  justify-content: center; 
4  align-items: center; 
5} 

In this example, the display property of the container is set to flex, which allows us to use the justify-content and align-items properties to center the child elements both horizontally and vertically.

2. Using grid:

css
Open in Editor
1.container { 
2  display: grid; 
3  place-items: center; 
4} 

In this example, the display property of the container is set to grid, and the place-items property is used to center the child elements both horizontally and vertically.

3. Using position and transform:

css
Open in Editor
1.container { 
2  position: relative; 
3} 
4 
5.centered-div { 
6  position: absolute; 
7  top: 50%; 
8  left: 50%; 
9  transform: translate(-50%, -50%); 
10} 

In this example, we've used a parent container with position: relative to position the child div with position: absolute. We've set the top and left properties of the child div to 50%, and then used transform: translate(-50%, -50%) to center it. Keep in mind that the third method requires the div to have a fixed width and height. If your div's dimensions are dynamic, you might need to use a different approach.