//水平靠左
.alignleft {
display: inline;
float: left;
}
<img src="" class="alingleft">
//水平靠右
.alignright {
display: inline;
float: right;
}
<img src="" class="alignright">
//水平居中
.aligncenter {
clear: both;
display: block;
margin: auto;
}
<img src="" class="aligncenter">div里的img标签实现水平垂直居中
将display设置成table-cell，水平居中设置text-align为center，垂直居中设置vertical-align为middle
<div><img src=""></div>
<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的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。
<div><img src=""></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%);
<div><img src=""></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%;
transform: translate(-50%,-50%);
}
</style>弹性布局flex
<div><img src=""></div>
<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;
margin: 0 auto;
}
img {
width: 50px;
height: 50px;
}
</style>设置父div为table-cell属性
<div><img src=""></div>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
width: 100px;
height: 100px;
display: inline-block;
}
</style>无固定宽高
<div><img src=""></div>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
border: 1px solid #000;
}
img {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid #000;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>固定宽高
<div><img src=""></div>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
text-align: center;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid #000;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>在div中添加span空元素
<div>
<img src="">
<span></span>
</div>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
text-align: center;
}
img {
width: 100px;
height: 100px;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
}
#box span{
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
</style>
