## **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 基础语法