how to center a form using css?

Question

Literally centering on ALL four sides. I see lots of tutorials just using

element.style.margin = "0 auto";

This only centers it on the X-Axis, but not the Y-axis.

How do I get it to center via Y-Axis as well?

Answer 1

I've used:

#myItem {
   position: fixed;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin-top: -50px;
   margin-left: -50px;
}

.... before, hope it helps

Answer 2

在要垂直居中的元素上设置display: table-cell和vertical-align: middle ，并在其父级容器元素上设置display: table ，使其居中。