CSS實現居中的幾個方案（總結）

本篇文章為大家介紹多個CSS居中方案。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

（學習影片分享：css影片教學）

水平居中

內聯元素

要使內聯元素（如鏈接，span 或img）居中，使用text-align: center 夠了。

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

對於多個內聯元素，也可以使用text-align：center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

#Flexbox

使用flexbox 也可以快速居中元素：

.desk {
  display: flex;
  justify-content: center;
}

對於多個內聯的項目，也可以正常運作：

CSS Grid

使用網格容器時，圖中的盤子將根據其網格區域居中。請注意，除非將它們包裹在一個元素中，否則這將不適用於多個盤子。

.desk {
  display: grid;
  justify-content: center;
}

區塊元素

#Auto Margin

寬度與高度已知的塊元素可以透過設定margin-left:auto 和margin-right:auto 來居中元素。

.plate {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

對於多個區塊元素，它們應該包裝在一個元素中，然後讓這個父元素居中。

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

#對於flexbox 同樣也是使用  justify-content:center 來居中元素：

.desk {
  display: flex;
  justify-content: center;
}

對於多個元素，我們不需要將它們包裹在一個元素中，flexbox 可以將它們都居中。

CSS定位

透過絕對定位，我們可以輕鬆地透過CSS transform將其水平置中。

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

在已知元素寬度的情況下，可以使用負邊距來取代CSS transform。

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

垂直居中

內嵌元素

##Vertical Padding

垂直居中元素最簡單的方法之一是使用

padding:

  padding-top: 24px;
  padding-bottom: 24px;
}

#Vertical Align

##vertical-align

屬性可用於一個或多個元素。 在此範例中，叉子和刀子應與桌子垂直居中。

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

為了對齊盤子，叉子和刀，我們可以使用flexbox:

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
}

區塊元素

絕對定位

透過絕對定位元素，可以使用CSS

transform

將元素垂直置中： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.plate { position: absolute; top: 50%; transform: translateY(-50%); }</pre><div class="contentsignin">登入後複製</div></div>

如果知道元素高度，則可以使用負邊距來取代

transform

。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.plate { position: absolute; top: 50%; margin-top: -60px; }</pre><div class="contentsignin">登入後複製</div></div>

CSS Grid

使用CSS網格，我們可以使用

align-items

將項目垂直於其網格區域置中。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.desk { display: grid; align-items: center; }</pre><div class="contentsignin">登入後複製</div></div>

水平垂直居中

#內聯元素

##Padding和Text Align

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

其他元素類型

絕對定位

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

#Flexbox透過justify-content:center 和

align-items:center### 就可以將元素垂直水平置中：###

.plate {
  display: flex;
  justify-content: center;
  align-items: center;
}

######CSS Grid#########透過###place-items###屬性就可以通過，它結合了###justify-content###和###align -items###:###

.desk {
  display: grid;
  place-items: center;
}

更多编程相关知识，请访问：编程入门！！

以上是CSS實現居中的幾個方案（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！