居中 div css 介绍

在网页设计中，我们常常会需要将某一个元素居中，比如说一段文本，一个图片或者是整个页面。CSS 中有多种方式可以实现元素居中，本篇将介绍其中一种实现方法——使用 div + css 居中。

实现方法

方法一：使用position+margin

在 CSS 中，我们可以使用 position 和 margin 来进行居中操作。具体来讲，我们将需要居中的元素使用绝对定位，top:50% 让其顶端位于父元素顶部的一半高度处，然后使用 translate 进行微调，使元素中心与父元素中心重合。

<div class="parent">
  <div class="child">我需要居中的元素</div>
</div>

<style>
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

方法二：使用flex布局

使用 flex 布局也可以实现元素居中。我们在父元素上设置 display:flex ，并使用 justify-content:center; 和 align-items:center; 来让其子元素水平、垂直居中。

<div class="parent">
  <div class="child">我需要居中的元素</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.child {
}
</style>

方法三：使用table布局

table 布局也可以实现元素居中。我们在父元素上设置 display:table ，并在子元素上设置 display:table-cell ，再使用 text-align:center 和 vertical-align:middle 属性对子元素进行居中操作。

<div class="parent">
  <div class="child">我需要居中的元素</div>
</div>

<style>
.parent {
  display: table;
  height: 100vh;
  width: 100%;
}

.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
</style>

总结

以上是三种常见的 CSS 居中方法，分别使用了 position ， flex 和 table 布局。对于不同元素的居中，还需要根据实际情况来选择合适的方法。