css中水平和垂直居中

來自：https://www.imooc.com/code/21419

1.‘行內’元素水平居中

水平居中設置-行內元素

我們在實際工作中常會遇到需要設置水平居中的場景，比如爲了美觀，文章的標題一般都是水平居中顯示的。

這裏我們又得分兩種情況：行內元素 還是 塊狀元素 ，塊狀元素裏面又分爲定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下行內元素怎麼進行水平居中？

如果被設置元素爲文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素。反之這個文本是div的子元素 )如下代碼：

html代碼：

我想要在父容器中水平居中顯示。

css代碼：

舉例：

2.‘定寬’+‘塊狀’元素垂直居中

水平居中設置-定寬塊狀元素

當被設置元素爲 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。

這一小節我們先來講一講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width爲固定值。)

滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值爲“auto”來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：

html代碼：

我是定寬塊狀元素，哈哈，我要水平居中顯示。

css代碼：

也可以寫成：

margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設置的。

舉例：

3.已知寬高實現盒子水平垂直居中

面試常考題之已知寬高實現盒子水平垂直居中
這一章節我們來學習已知寬高實現盒子水平垂直居中。通常使用定位完成，例如想要實現以下效果：

4.未知寬高實現盒子水平垂直居中

這一章我們來學習未知寬高實現盒子水平垂直居中，通常使用定位以及translate完成。參考下面例子：

慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網

添加樣式：

.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;

}

.box1 {
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

效果如下：

技術點的解釋：

1、利用父元素設置相對定位,子元素設置絕對定位,那麼子元素就是相對於父元素定位的特性。

2、子元素設置上和左偏移的值都爲50%。

3、然後再用css3屬性translate位移,給上和左都位移-50%距離，就能達到垂直水平居中的效果。