技術標籤：span 居中span居中span文字水平垂直居中讓盒子裡面的span水平垂直居中

1，塊級元素設定height和line-height或者text-align: center，可以讓塊級元素包裹的內聯元素或者自身文字內容垂直居中或者水平居中；但是對包裹的塊級元素和浮動元素不起作用。

2，塊級元素包裹塊級元素，設定被包裹元素margin: 0 auto達到水平居中，但是設定父元素的height和line-height或者子元素的vertical-align: middle不起作用，因為vertical-align: middle只對行內元素有效。總結設定子元素垂直居中有以下幾種方法：

2.1，設定塊級子元素display: inline-block

<div class="btn-container">
  <div class="btn-content"></div>
</div>

.btn-container {
  width: 100%;
  height: 40px;
  background-color: red;
  line-height : 40px;
  text-align: center;
  font-size: 0px;
}

.btn-content {
  display: inline-block;
  width: 100px;
  height: 30px;
  vertical-align: middle;
  background-color: green;
}
 

注意一定要設定父元素font-size: 0px。這是因為vertical-align: middle預設是和父元素的基線居中對齊，父元素的基線可以假想為字母x的底邊，只有設定父元素font-size: 0px，才能將父元素的基線調整到中間，達到子元素在父元素中垂直居中的目的。

設定之前：

設定之後：

2.2，父塊級元素包裹兩個屬性值為display: inline-block的子元素，並且有一個子元素的高度為100%，並且兩個子元素都設定vertical-align: middle，達到另一個子元素垂直居中：

<div class="btn-container">
  <span class="btn-text">客戶端</span>
  <div class="btn-content"></div>
</div>

.btn-container {
  width: 300px;
  height: 40px;
  background-color: red;
}

.btn-text {
   display: inline-block;
   height: 100%;
  vertical-align: middle;
  background-color: green;
}

.btn-content {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: yellow;
  vertical-align: middle;
}
 

渲染結果如下圖所示：

注：該情況也適用於子元素為一張圖片加一個塊級元素的情況

2.3，設定父元素的padding-top為(父元素高度-子元素高度)/2

.btn-container {
  width: 300px;
  height: 40px;
  background-color: red;
  padding-top: 5px;
}

.btn-content {
   width: 100px;
  height: 30px;
  background-color: green;
}

那是否可以設定子元素的margin-top來達到同樣的效果呢，也可以，但是有風險。根據規範，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊。說白點就是，父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding，就會不斷一層一層向上找，把自己的margin當父元素的margin執行。

2.4，設定子元素為絕對定位，有以下3種方法可以實現水平和垂直居中：

.btn-container {
  position: relative;
  width: 300px;
  height: 40px;
  background-color: red;
}
//第一種方法
.btn-content {
   position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
  width: 100px;
  height: 30px;
  background-color: green;
}
//第二種方法
.btn-content {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -15px;
  margin-left: -50px;
  width: 100px;
  height: 30px;
  background-color: green;
}
//第三種方法
.btn-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 30px;
  background-color: green;
}

第二種方法必須知道子元素寬度和高度；如果不設定子元素尺寸，第一種方法子元素尺寸會和父元素一致，第三種方法會和子元素中包裹的內容一致；

2.5，使用flex彈性佈局，彈性容器的每個子元素都變成一個彈性元素，而且是以相同方式佈局的。不管是段落還是span元素，都變成彈性元素。

以2.2節為例:

.btn-container {
  width: 300px;
  height: 40px;
  background-color: red;
  display: flex;
  align-items: center;
}

.btn-text {
  height: 100%;
  background-color: green;
}

.btn-content {
  width: 100px;
  height: 30px;
  background-color: yellow;
}

可以看到彈性佈局簡單很多，所以h5佈局中能用彈性佈局的地方我們都應該儘量用彈性佈局，在介面適配方面彈性佈局也有一定的優勢。