層疊樣式表(英文全稱:CascadingStyleSheets)是一種用來表現html(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。css不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

CSS中幾種常用的水平垂直居中對齊方法：

文字的水平垂直居中

text-align:center;

line-height:當前元素高度;

元素的水平垂直居中

1使用絕對定位

/*需要固定寬高*/

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

width:xxx;

height:xxx

margin:auto;

2使用絕對定位+calc()

/*需要知道具體的元素寬高值*/

position:absolute;

width:xxx;

height:xxx;

top:calc(50%-xxx/2);

left:calc(50%-xxx/2)

3.使用絕對定位+transform

/*不需要知道元素的寬高*/

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

4.使用display:flex;

display:flex;

justify-content:center;

align-items:center;

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在web設計領域是一個突破，利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

以上是酷仔今日整理的“Web前端基礎教程：CSS中幾種常用的水平垂直居中對齊方法”一文，希望為正在學習Web前端的同學提供參考。

個視頻來說一下CSS布局里面比較基礎，但是非常重要的一個知識點：居中布局。這里我會給大家介紹幾種實現水平垂直居中的方法。有的方法比較推薦大家使用，有的作為了解就可以了。這里我寫了兩個div，現在要做的就是讓小的紅色這個div在外面大的div里面水平垂直同時居中。接下來我說的這幾種方法里面，前面兩種是我比較推薦大家來使用的。

·第一種，用彈性盒布局，讓它里面的元素在主軸和側軸同時居中就可以了。這個方法是現在大家用的比較多，也比較容易理解的方法。沒問題，現在紅色這個div已經水平垂直都居中了，來恢復一下。

·第二種，這里可以用定位，容器開啟相對定位，然后子元素設置絕對定位，再把top和left都設置成50%。現在其實是把紅色的div的左上角移到外面大的div的中心點，所以只要把紅色這個div往上面移動高度的一半，還有往左邊移動寬度的一半，這樣就可以實現水平和垂直同時居中了。

這里只要弄清楚這幾個50%是參考誰來進行計算的就可以了。

→首先是top left，這個50%是參考它的包含塊，這里也就是它的父元素的寬高來進行計算的，所以就會把它的左上角定位到父元素的中心點平移的50%，就是參考它自身的寬高來進行計算的。負就是往回走，這樣就剛好可以實現水平和垂直同時居中。OK，沒有問題。

→這兩種方法是我比較推薦大家來使用的，也是比較容易理解的。再來恢復一下。再來說兩種方法，大家作為了解就可以了。這里同樣也是用到定位，再設置四個方向的偏移值都為0，再配合margin為auto，同樣是可以實現水平和垂直都居中了。

為什么不推薦這個方法？因為這里其實是靠外邊距配合定位，把內容區域頂到中間的，盒子其實是被撐大了的，只是肉眼看不出來。

現在這個盒子的模型不一定是我們想要的，當然這個方法某些情況下是可以用的，再把它恢復一下。

·再來說一種比較特殊的方法，也是作為了解就可以了。這里我給它添加一個空的span，然后span我要對它設置高度，讓它撐滿整一個父容器。但是span它是行內元素，對它設置高度是不起效的，所以還要把它轉換成行內塊，不單止它。

紅色的div同樣也要設置成行內塊元素。現在我們就有了兩個行內塊元素了，是不是就可以設置它們的基線對齊方式，設置成中線對齊。

→這個空的div同樣要設置成中線對齊，所以現在紅色的這個div和span它們就要進行中線對齊。然后span的高度又是撐滿整一個父容器。這樣看起來紅色的div就垂直居中了。但實際上是旁邊這里有一個空的span，它的高度是撐滿整一個父容器的。然后它和紅色的div中線對齊，所以紅色的div看起來就垂直居中了。

那水平局中怎么處理？非常簡單。因為紅色的div現在已經是一個行內塊元素了，我們就可以對它設置text-align，塊級元素用這種對齊方式是不行的。最常見是用于對文字的居中對齊，OK沒有問題，水平和垂直都居中了。

這個視頻給大家分享了4種方法實現水平和垂直同時居中。這里推薦大家主要使用前面兩種方法，后面兩種作為了解就可以了。這個視頻就到這里感謝大家的收看。

<style type="text/css">
 html {
 position: relative;
 min-height: 100%;
 }
 body {
 margin-bottom: 60px;
 }
 .footer {
 position: absolute;
 bottom: 0; width: 100%;
 /* Set the fixed height of the footer here */
 height: 60px;
 background-color: #f5f5f5;
 }
</style>
.......
.....
</div>
<footer class="footer">
 <div style="text-align:center;">
 Copyright 2019 by Ben
 </div>
</footer>
</body>