整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
許多方法可以將HTML元素與CSS對齊，但是一起使用或單獨使用它們并不是那么容易。開發(fā)人員所面臨的困難之一就是試圖將元素集中在頁面中間。
因此，在本文中，我將展示一些最常用的方法，即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。
讓我們開始使用3個不同的CSS屬性將圖像水平居中。
使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當圖像位于塊級容器（例如<div>）內(nèi)時，此方法才有效：
使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個其他屬性。
margin-auto屬性對內(nèi)聯(lián)級別的元素沒有任何影響。由于<img>標簽是一個內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級元素：
其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動對齊，可以這樣解決問題（除非我們給出100％的寬度）：
將圖像水平居中的第三種方法是使用display：flex。同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。
justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會占用100％的空間，然后我們就無法對其進行集中化。
1、Display: Flex
對于垂直對齊，使用display：flex確實很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：
現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：
如果將align-items屬性與display：flex一起使用，就會將元素垂直放置。
2、位置：絕對和變換屬性
垂直對齊的另一種方法是一起使用position和transform屬性。這個有點復(fù)雜，所以讓我們一步一步地做。
步驟1：定義絕對位置
首先，我們將圖像的定位行為從靜態(tài)更改為絕對：
同樣，它應(yīng)該位于相對放置的容器內(nèi)，因此我們添加一個位置：相對于其容器的div。
步驟2：定義頂部和左側(cè)屬性
其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會將圖像的起點（左上角）移到容器的中心：
步驟3：定義變換屬性
在第二步的時候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負50％可以達到目的：
還可以使用其他方法進行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。
SS中文字居中顯示的方式有以下五種：
將text-align屬性值設(shè)置為center可以將文本居中顯示。
.center {
text-align: center;
}將vertical-align屬性值設(shè)置為middle可以將文本垂直居中顯示。
.center {
vertical-align: middle;
}將line-height屬性值設(shè)置為比字體大小略大的值，可以使文本在容器中垂直居中顯示。
.center {
line-height: 20px;
}display: flex屬性將父元素設(shè)置為彈性布局，并使用align-items: center屬性將子元素在交叉軸上居中對齊。
.center {
display: flex;
align-items: center;
}
position: absolute屬性和transform: translateY(-50%)將子元素相對于其父元素垂直居中對齊。
// 父容器
.center {
position: relative;
height: 200px;
}
// 子容器
.center > div {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
height: 100px;
width: 200px;
background-color: #ccc;
}以上就是CSS中文字居中顯示的幾種方式，根據(jù)實際需求選擇合適的方式即可。
SS 是前端里面的基礎(chǔ)之一，也是非常重要的一部分，它往往決定了你所做出來的網(wǎng)頁頁面是否美觀。在設(shè)計網(wǎng)頁頁面的過程中，總會有將元素或者文字進行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。
當元素有給定的高度以及寬度的時候，使用 margin: auto; 元素僅會水平居中，并不會進行垂直居中。此時就需要設(shè)置元素的 position 為 absolute，父級元素的 position 為 relative，同時元素的上下左右都需要設(shè)置為 0。
HTML 代碼
<div class="box">
<div class="center1"></div>
</div>CSS 代碼
.box{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;
margin-top: 20px;
}
.center1{
width: 50px;
height: 50px;
background-color: #00ACED;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}效果展示：
當已經(jīng)知道了要進行水平垂直居中的元素的寬高時，就可以通過設(shè)置 position: absolute 來實現(xiàn)。但是，使用的同時還需要結(jié)合其他屬性才完整實現(xiàn)。因為，單是設(shè)置 absolute，上左距離均為一半，就會出現(xiàn)下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點
概念圖：
因此想要實現(xiàn)元素完全水平垂直居中，在設(shè)置了 absolute 定位后，可以設(shè)置 margin 值為負，或者使用 calc 來計算，上左距離在 50% 的基礎(chǔ)上還要減去元素本身一半的寬高。
margin 值為負或者 calc 計算均是在已知元素寬高的情況下，假設(shè)不知道元素的寬高，那么怎么實現(xiàn)水平垂直居中呢？這里就可以使用 transform 屬性，通過坐標位移來實現(xiàn)居中。
CSS 代碼
/* 結(jié)合 margin */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* 結(jié)合 calc 計算*/
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: calc(50% - 25px)
top: calc(50% - 25px);
}
/* 結(jié)合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}效果展示
03
PART
可以通過彈性布局來設(shè)置水平垂直居中，這里需要設(shè)置父級元素 display:flex; 還需要設(shè)置兩個屬性，水平布局 justify-content 以及垂直布局 align-items。
HTML代碼
<div class="box2">
<div class="center4"></div>
</div>CSS代碼：
.box2{
background-color: #eee;
width: 200px;
height: 200px;
position: relative;
margin-top: 20px ;
display: flex;
justify-content: center;
align-items: center;
}
.center4{
width: 50px;
height: 50px;
background-color: #B39873;
}效果展示：
前面介紹的是元素如何實現(xiàn)水平垂直居中，下面介紹的是如何將文字進行水平垂直居中。這第一個方法也是最經(jīng)常用的，使用文本水平對齊 text-align 和行高 line-height 來實現(xiàn)的。
HTML 代碼
<div class="box3">
<div class="center5">文字居中</div>
</div>CSS 代碼
.box3{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
}
.center5{
text-align: center;
line-height: 200px;
}效果展示
05
PART
第二個方法可以通過網(wǎng)格布局 grid 來實現(xiàn)。而這里通過 grid 有兩種方式實現(xiàn)，一種對元素本身屬性進行設(shè)置，另一種在元素的父級元素中設(shè)置。兩者看上去內(nèi)容似乎差不多，不同的是在元素中設(shè)置的是 align-self 還要多了一個 margin，父級元素中是 align-items。
相關(guān)代碼：
/* grid 元素中設(shè)置 */
.box4{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
}
.center6{
align-self: center;
justify-content: center;
margin: auto;
}
/* grid 父級元素中設(shè)置 */
.box5{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
align-items: center;
justify-content: center;
}
效果展示：
以上就是關(guān)于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法，大家還其他關(guān)于 CSS 實現(xiàn)水平垂直居中的方法嗎？請在評論區(qū)留下你的想法。
關(guān)注w3cschool編程獅訂閱更多IT資訊、技術(shù)干貨~
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
