有一些常見的編碼問題您可能會遇到當你開始練習你所學到的建設項目。

一個常見的問題你將面對作為一個web開發人員是如何將一個元素在頁面的中心或在一個元素作為它的容器。它是無處不在的“我怎么中心一個div ?”的問題。

在本文中,我們將看到如何中心元素使用不同的CSS屬性。每一節中我們將看到代碼示例和可視化表示元素的所有的例子。

如何使用CSS中心一個Div Flexbox

在本節中,我們將看到如何使用CSS Flexbox屬性中心元素水平,垂直,在頁面/容器的中心。

如果你喜歡你可以使用一個圖像,但我們將只使用一個簡單的循環使用CSS。這是代碼:

<div class="container">
      <div class="circle">
      </div>
</div>

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

定位與Flexbox要求我們寫的代碼在父或容器元素的類。

如何使用Flexbox中心一個Div水平

現在我們將編寫代碼中心div元素水平。我們還利用我們上面創建的圈子。

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

我們增加了兩行代碼中心水平圓。這些是我們添加的行:

display: flex;
justify-content: center;

顯示:flex;允許我們使用Flexbox和它的屬性,而justify-content:中心;水平對齊圓中心。

這是我們的位置循環:

如何使用Flexbox中心一個Div垂直

我們將會做什么在這一節中類似于最后一個,除了一行代碼。

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  align-items: center;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

在這個例子中,我們使用對齊項目:中心;中心圓垂直。回想一下,我們被要求寫顯示:flex;先指定的方向。

這是我們的圓的位置:

如何定位一個Div中心使用Flexbox

在本節中,我們將在頁面的中心位置圓使用CSS Flexbox的水平和垂直對齊屬性。方法如下:

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

以下是我們的三行代碼添加到容器類上圖:

display: flex;
justify-content: center;
align-items: center;

正如所料,我們首先顯示:flex;它允許我們使用Flexbox CSS。我們然后使用justify-content水平對齊,對齊項目(垂直對齊)屬性位置圓的中心頁面。

這是我們的位置循環:

如何使用CSS保證金水平中心一個Div財產嗎

在本節中,我們將使用保證金財產中心水平圓。

讓我們創建我們的圓。

<div class="container">
      <div class="circle">
      </div>
</div>

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

這一次我們將圓類中編寫代碼。方法如下:

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
}

我們已經添加了保證金:0汽車;行代碼圓類。

讓我們看一看圓的位置:

如何使用CSS文本水平居中text-align財產嗎

在本節中,我們將看到如何使文字水平居中。

這種方法只能當我們正在與文字寫在一個元素。

這是一個例子:

<div class="container">
    <h1>Hello World!</h1>      
</div>

在上面的示例中,我們創建了一個類的div容器和一個h1元素和一些文本。這是此刻的樣子:

讓我們編寫CSS代碼。

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
h1 {
  text-align: center;
}

在其他一致h1元素中的文本在頁面的中心,我們不得不使用text-align屬性,給它一個中心的價值。這就是它看起來像現在在瀏覽器中:

結論

在本文中,我們看到了如何中心元素水平,垂直,在頁面的中心使用Flexbox保證金和text-align CSS屬性。