How to center div?

Question

I have a problem with centering div in HTML (vertical & horizontal). My code looks something like this:

SOME HTML
         


        

Answer 1

Try this one:

Css:

.cont{
  background-color: tomato;
  width: 600px;
  height: 400px;
  position: relative;
}
.box {
  width:100px;
  height:100px;
  background-color: teal;
  color:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}