页面中间的中心 div - CSS

在网页设计中，通常需要将页面内容居中显示，让整个页面看起来更加美观协调。本文介绍使用 CSS 实现页面中间的中心 div 的方法。

HTML布局

首先在 HTML 中创建一个 div 元素，并将要居中的内容放入其中。

<div class="center">
  <p>要居中的内容</p>
</div>

CSS布局

1. 使用 margin 属性

可以使用 margin 属性将 div 元素向左和向右移动。由于 margin 属性的值是相对于 div 容器的，因此通过设置左右 margin 值为 “auto” 可以实现 div 元素水平居中对齐。

.center {
  margin: 0 auto;
}

2. 使用 position 和 transform 属性

可以使用 position 属性将 div 元素完全居中，然后使用 transform 属性将其向左和向上移动自身宽度和高度的一半。这种方法需要在 div 元素的样式中设置 top，left，transform，以及 -webkit-transform（兼容 WebKit 浏览器）属性。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

3. 使用 display，position 和 margin 属性

可以使用 display 和 position 属性将 div 元素放置在整个视口中，并使用 margin 属性将其向左和向上移动所需的数量。

.center {
  display: flex;
  justify-content: center;
  align-items: center; 
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

结论

以上三种方法都可以实现将 div 元素水平和垂直居中对齐的效果。具体应该选择哪个方法，取决于页面布局和要居中的元素的大小。