整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS 是前端里面的基礎之一，也是非常重要的一部分，它往往決定了你所做出來的網頁頁面是否美觀。在設計網頁頁面的過程中，總會有將元素或者文字進行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。
當元素有給定的高度以及寬度的時候，使用 margin: auto; 元素僅會水平居中，并不會進行垂直居中。此時就需要設置元素的 position 為 absolute，父級元素的 position 為 relative，同時元素的上下左右都需要設置為 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;
}效果展示：
當已經知道了要進行水平垂直居中的元素的寬高時，就可以通過設置 position: absolute 來實現。但是，使用的同時還需要結合其他屬性才完整實現。因為，單是設置 absolute，上左距離均為一半，就會出現下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點
概念圖：
因此想要實現元素完全水平垂直居中，在設置了 absolute 定位后，可以設置 margin 值為負，或者使用 calc 來計算，上左距離在 50% 的基礎上還要減去元素本身一半的寬高。
margin 值為負或者 calc 計算均是在已知元素寬高的情況下，假設不知道元素的寬高，那么怎么實現水平垂直居中呢？這里就可以使用 transform 屬性，通過坐標位移來實現居中。
CSS 代碼
/* 結合 margin */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* 結合 calc 計算*/
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: calc(50% - 25px)
top: calc(50% - 25px);
}
/* 結合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}效果展示
03
PART
可以通過彈性布局來設置水平垂直居中，這里需要設置父級元素 display:flex; 還需要設置兩個屬性，水平布局 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;
}效果展示：
前面介紹的是元素如何實現水平垂直居中，下面介紹的是如何將文字進行水平垂直居中。這第一個方法也是最經常用的，使用文本水平對齊 text-align 和行高 line-height 來實現的。
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
第二個方法可以通過網格布局 grid 來實現。而這里通過 grid 有兩種方式實現，一種對元素本身屬性進行設置，另一種在元素的父級元素中設置。兩者看上去內容似乎差不多，不同的是在元素中設置的是 align-self 還要多了一個 margin，父級元素中是 align-items。
相關代碼：
/* grid 元素中設置 */
.box4{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
}
.center6{
align-self: center;
justify-content: center;
margin: auto;
}
/* grid 父級元素中設置 */
.box5{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
align-items: center;
justify-content: center;
}
效果展示：
以上就是關于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法，大家還其他關于 CSS 實現水平垂直居中的方法嗎？請在評論區留下你的想法。
關注w3cschool編程獅訂閱更多IT資訊、技術干貨~
哥最近調整自己的一個網站時，覺得在發布文章時，手動把圖片居中，實在有些麻煩。能不能讓文章內容中的圖片自動居中呢？是否可以通過樣式控制表來實現？
網上找了下答案，似乎有些過于復雜了。自己動手實踐吧。
首先要調整的，是讓圖片獨占一行空間。
補充CSS知識點：
圖像（<img>標簽）默認是行內樣式（inline style），行內樣式的大體意思是，它前邊或后邊的HTML標簽元素會緊挨著排在它的前后（如影隨形），不會另換一行;而像DIV標簽則默認是塊級元素，塊級元素前后的標簽元素會換行。因此需要把文章內容中的圖片樣式由行內樣式更換為block塊級元素，要不就易和文字內容糾纏在一起。
簡單點：
block元素將顯示為塊級元素，此元素前后會帶有換行符。
inline默認。元素會被顯示為內聯元素，元素前后沒有換行符。
在原有的控制圖像的樣式中增加：display: block。
.entry img {
max-width: 100%;
height: auto;
display: block;
}
圖像設為塊級元素后，需要讓圖像居中。居中用的同樣是網頁布局時整體居中的代碼，即margin:0 auto，0可以改為任何數據，像素或EM；重要的是AUTO屬性，因為它控制元素左右的距離，AUTO則是用于居中的屬性。
實例：
.entry img {
max-width: 100%;
height: auto;
display: block;
margin:0 auto;
}
經以上設置后，圖像已能自動在文章內容中居中。但在實踐中，發現一些舊的網頁文章，在發布時其圖像有行內樣式，如：<img style=”margin:0;”>這樣的。由于行內樣式的優先（層疊）級別高于外部樣式表中的圖像自動居中的定義，因此剛才定義的：margin:0 auto就失效了。
這也不是問題，給這個居中用!important指定為最優先級別。最樣使用的樣式如下。
.entry img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto !important;
}
好記性不如爛筆頭，記下來方便再次用。
實例應用可查看：起點通首頁點任一文章內容頁，或肖運華個人博客文章內容頁。
. 元素高度聲明的情況下在父容器中居中：絕對居中法
<div class="parent">
<div class="absolute-center"></div>
</div>
.parent {
position: relative;
}
.absolute-center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 70%;
width: 70%;
}
優點：
1.跨瀏覽器，包括 IE8-10
2.無需其他冗余標記，CSS 代碼量少
3.完美支持圖片居中
4.寬度高度可變，可用百分比
缺點：
1.必須聲明高度2. 負外邊距：當元素寬度高度為固定值時。設置 margin-top/margin-left 為寬度高度一 半的相反數，top:50%;left:50%
<div class="parent">
<div class="negative-margin-center"></div>
</div>
.parent {
position: relative;
}
.negative-margin-center {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
height: 300px;
width: 300px;
}
優點：
良好的跨瀏覽器特性，兼容 IE6-7
代碼量少
缺點：
不能自適應，不支持百分比尺寸和 min-/max-屬性設置
內容可能溢出容器
邊距大小域與 padding，box-sizing 有關3. CSS3 Transform 居中：
<div class="parent">
<div class="transform-center"></div>
</div>
.parent {
position: relative;
}
.transform-center {
position: absolute;
left: 50%;
top: 50%;
margin: auto;
width: 50%;
-webkit-transform: translate(-50%， -50%);
-moz-transform: translate(-50%， -50%);
transform: translate(-50%, -50%);
}
優點：
內容高度可變
代碼量少
缺點：
IE8 不支持
屬性需要瀏覽器廠商前綴
可能干擾其他 transform 效果4. table-cell 居中：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
