## **css實現圖片水平垂直居中**
body結構
```
<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>
```
**方法一:**
將display設置成table-cell,然后水平居中設置text-align為center,垂直居中設置vertical-align為middle。
```
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>
```
**方法二:**
通過position定位來實現。將div設置成相對定位relative,將img設置成絕對定位absolute,left:50%,top:50%,此時圖片的左上角位于div的中心,要是圖片的中心位于div的中心,就需要將圖片向上移動圖片高度的一半,并向左移動圖片寬度的一半。
```
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 寬度的一半 */
}
</style>
```
**方法三:**
**可以用在不清楚圖片圖片或元素的真實寬高情況下**
還是通過position定位來實現。將div設置成相對定位relative,將img設置成絕對定位absolute,left:50%,top:50%,此時圖片的左上角位于div的中心,要是圖片的中心位于div的中心,就需要將圖片向上移動圖片高度的一半,并向左移動圖片寬度的一半,如果不知道元素的寬高,可以用transform: translate(-50%,-50%);
```
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
```
**方法四:**
```
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
```
**方法五:彈性布局flex**
```
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>
```
*****
*****
*****
*****
*****
*****
*****
*****
*****
#### **(1).vertical-algin與line-height結合**

圖一
效果如下:

圖二
> div中是存在著我們看不到的空白節點,我們可以把它想象成一個字母a,這個字母根據我們寫的css屬性將會水平垂直居中顯示,而同時我們設置圖片的vertical-algin:middle,圖片將會與字母a的中線對齊,而當文字font-size為0的時候,此時文字的中線也就完全居中,此時就是嚴格意義上的居中顯示了(文字font-size不為0時,它的中線與設置的字體有關)。
>
*****
#### **(2).position:absolute和margin負值**
代碼如下:

效果如圖二所示。
弊端:必須知道圖片的寬度和高度。
*****
#### **(3).模擬表格table-cell**

圖四
效果如圖二所示。
相當于模擬表格的td標簽。
*****
#### **(4).position拉伸**

圖五
效果如下:

圖六
> 如上所示,當塊狀元素尺寸確定,被拉伸,同時margin:auto的時候,此時,圖片就可以達到居中效果,兼容性IE8+。absolute和width同時存在的時候,width的作用要大于拉伸效果。
*****
*****
*****
## **img右邊的文字垂直居中**
對img作如下設置
```
img{
vertical-align:middle;
}
```
- 第一章 git
- 1.1 git基本語法
- 1.2 版本回退
- 1.3 ssh的配置
- 第二章 markdown基本語法
- 第三章 HTML CSS
- 3.1 html基礎知識
- 3.2 css基礎
- 3.3 img垂直居中
- 3.4 清除鼠標懸停抖動
- 3.5 字體、列表、表格、文本、鏈接樣式
- 3.6 屬性繼承
- 3.7 float
- 3.8 定位
- 3.9 li加邊框文字移動問題
- 3.10 title旁邊的小圖標
- 第四章 Vue
- 4.1
- 第五章 JavaScript
- 5.1 基本語法
- 5.2 DOM事件
- 5.3 事件
- 5.4 jQuery引用
- 5.5 顯示與隱藏
- 5.6 回到頂部
- 第六章 jQuery
- 6.1 基礎語法