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也能很好的實現上下居中的效果。