让div中的图片上下左右居中(div里面的图片居中)
如何让图片在div里左右居中，上下居中
style
#box{width:500px;height:500px;position:relative;}
#box?img{width:100px;height:100px;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px}
/style
div?id="box"
img?src="xxx.jpg"
/div
原理是图片定位距离容器的上边和左边各50%，然后用margin-top和margin-left再减去图片的一半，，这就是容器的正中间的，就是水平垂直居中了。
在div里，如何让图片居中
方法一：
思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
div
img src="images/tt.gif" width="150" height="100" /
/div
CSS样式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
释义：
图片的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色，便于观察效果。
text-align:center,实现图片的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度 – 图片的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
方法二：
思路：只用padding属性，通过计算求得居中
结构代码同上；
CSS样式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：
利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中。
结构代码同上；
CSS代码如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中
如何实现div的上下左右都居中?
通常我们用到的css布局都是左右居中，经典css写法如下：
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
margin:0
auto;
width:500px;
height:auto;
}
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
margin:0
auto;
width:500px;
height:auto;
}
上面是经典的左右居中的css写法，那么像登录框那些比较小得div块只是左右居中是否不是太美观，如果上下左右都居中这是
大多数网站的做法，下面是一个比较经典的div上下左右居中的css写法：
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
/*此时宽和高都要固定*/
width:500px;
height:500px;
}
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
/*此时宽和高都要固定*/
width:500px;
height:500px;
}
上面的margin可以合并：margin:-250px
-250px;
大概原理就是：布局需用position，绝对布局absolute还是相对布局relative得看父容器，top，left相对于顶部和左部都相距整个容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px
向左回退div宽的50%即：margin-left:-250px
如何让div中的内容在上下和左右都居中
让div的内容在上下和左右都居中，可以设置margin-left,margin-right,margin-top,margin-buttom为auto来实现。
另外，横向的居中
text-align：center
垂直的居中
可以
人为
定义好里面内容的高度然后
margin:auto
如何将div中的div上下左右居中
div
的垂直居中
可以用position:relative
left=50%
top=50%
在这个层里面再建一个divposition:relative
left=-50%
top=-50%
div
的水平居中
可以在body
设置
text-align=center
又或者设置line-height=*px
div上下居中怎么设置
第一种方式，知道自己高度，知道容器高度，用margin-top,margin-left设置居中。
第二种方式，知道自己高度，知道容器高度，设置成position:relative;用margin:0 auto;实现左右居中，用margin-top实现上下居中。
第三种方式；position:absolute;的情况，用top，left，bottom，right距离来设置居中，前提也是知道容器高度和自己高度。
第四种方式，用弹性容器来居中。这种情况一般是不自动换行，只有一行的居中情况。
display:flex;display:-webkit-flex;/*纵向对齐方式：居中*/align-content:center;-webkit-align-content:center;