CSS上下居中详解

一、CSS上下居中怎么设置

CSS上下居中是在网页布局中比较常见的需求，下面我们来介绍一些实现上下居中效果的方法:

1、设置line-height等于height，适合单行文本或者图片，其中height和line-height需要设置相同的数值，代码如下：

<div class="vertical-center">
  <img src="xxx.png" alt="图片">
</div>

.vertical-center {
  height: 300px;
  line-height: 300px;
  text-align: center;
}

2、使用display:flex实现上下居中，代码如下：

<div class="vertical-center">
  <p>这是一段内容</p>
</div>

.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

3、使用position:absolute实现上下居中，需要知道宽度和高度，适用于不确定高宽的元素实现上下居中，代码如下：

<div class="vertical-center">
  <p>这是一段内容</p>
</div>

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

二、CSS图片上下居中

在网页布局中，图片尺寸不一致时，需要对图片进行居中处理，下面我们来介绍一些方法:

1、基于background-image的居中方法，需要知道容器的宽高，代码如下：

<div class="vertical-center"></div>

.vertical-center {
  background-image: url(xxx.jpg);
  background-size: contain;
  background-repeat: no-repeat; 
  background-position: center center;
  width: 300px;
  height: 300px;
}

2、img标签上设置position:absolute实现居中，代码如下：

<div class="vertical-center">
  <img src="xxx.png" alt="图片">
</div>

.vertical-center {
  position: relative;
  width: 300px;
  height: 300px;
}

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

三、CSS上下居中自适应

在响应式设计中，页面元素的宽高比例不稳定，需要按照不同屏幕尺寸调整元素宽高比，这时，居中需要根据不同的宽高比来调整，下面我们用一个例子来介绍如何实现响应式居中：

<div class="vertical-center">
  <img src="xxx.jpg" alt="图片">
</div>

.vertical-center {
  position: relative;
  width: 90%;
  height: 0; /* 设为0，子元素按比例缩放，不会导致父元素撑开 */
  padding-bottom: 60%; /* 设为60%，表示宽高比为1.5 */
}

.vertical-center img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

四、CSS上下左右居中

上下左右居中是指元素在水平和垂直方向上同时居中，下面我们来介绍实现方法：

1、使用display:flex实现上下左右居中，代码如下：

<div class="vertical-center">
  <p>这是一段内容</p>
</div>

.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.vertical-center p {
  margin: 0;
}

2、使用position:absolute实现上下左右居中，需要知道宽度和高度，代码如下：

<div class="vertical-center">
  <p>这是一段内容</p>
</div>

.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

.vertical-center p {
  margin: 0;
}

五、CSS字体怎么上下居中

CSS字体的上下居中是指把文字在元素中垂直居中，下面我们来介绍如何实现文字上下居中：

1、使用line-height实现单行文字的居中，代码如下：

<p style="height: 100px; line-height: 100px;">这是一行文字</p>

2、使用display:flex实现多行文字的居中，代码如下：

<p class="vertical-center">这是一行文字，可以是多行文字</p>

.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

3、使用position:absolute实现单行文字的居中，需要知道宽度和高度，代码如下：

<p class="vertical-center">这是一行文字</p>

.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

4、使用position:absolute和display:table-cell实现多行文字的上下居中：

<div class="vertical-center">
  <p>这是一段文字，可以是多行文字</p>
</div>

.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
}

.vertical-center p {
  margin: 0;
}

六、JS上下居中怎么弄

除了使用CSS来实现上下居中，还可以使用JavaScript来实现，下面我们来介绍一些实现方法：

1、使用JavaScript计算top值和left值来实现上下左右居中，代码如下：

<div id="box">
  <p>这是一行文字，可以是多行文字</p>
</div>

#box {
  position: absolute;
  width: 300px;
  height: 300px;
}

var box = document.getElementById("box");
box.style.top = (window.innerHeight - box.offsetHeight) / 2 + "px";
box.style.left = (window.innerWidth - box.offsetWidth) / 2 + "px";

2、使用JavaScript计算top值和margin-left值来实现上下居中，代码如下：

<div id="box">
  <p>这是一行文字，可以是多行文字</p>
</div>

#box {
  position: absolute;
  width: 300px;
  height: 300px;
}

var box = document.getElementById("box");
box.style.top = (window.innerHeight - box.offsetHeight) / 2 + "px";
box.style.marginLeft = -box.offsetWidth/2 + "px";

通过以上的方法我们可以看到JavaScript也能很好的实现上下居中的效果。