使用CSS将页面上的内容居中

Question

我正在尝试创建潜在客户生成页面.我希望在任何浏览器大小上显示时,将页面上的所有内容都集中到中心.

我尝试使用垂直对齐中心.但它似乎不起作用.

这样做的最佳做法是哪些？

Answer 1

如果您只想在左右边缘之间居中,则创建一个具有固定宽度的元素,并margin: auto;在其上声明.

如果要将元素水平和垂直居中,则将其水平和垂直放置在页面的中间位置,然后将元素的宽度和高度的一半拉回.

例如:

.someElement {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
}