属性设置元素的垂直对齐方式，可能的值：
baseline
默认。元素放置在父元素的基线上。
sub
垂直对齐文本的下标。
super
垂直对齐文本的上标
top
把元素的顶端与行中最高元素的顶端对齐
text-top
把元素的顶端与父元素字体的顶端对齐
middle
把此元素放置在父元素的中部。
bottom
把元素的顶端与行中最低的元素的顶端对齐。
text-bottom
把元素的底端与父元素字体的底端对齐。
%
使用
"line-height"
属性的百分比值来排列此元素。允许使用负值。
inherit
规定应该从父元素继承
vertical-align
属性的值。
如下代码即可实现垂直对其：
.img{vertical-align:bottom}
.input{vertical-align:bottom}
<p>
<img
class="img"
border="0"
src="/i/eg_cute.gif"
/>
<input
class="input"
/>
</p>
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {margin-left: 100pxborder-right:1px dashed blackheight:150pxwidth:1px}
3、浏览器运行index.html页面，此时成功用css和div实现了垂直的点虚线。
方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px
height: 600px
background-color: orangered
}
.son{
width: 300px
height: 200px
background-color: lawngreen
position: absolute
margin: 200px 150px
}
</style></head><body><div><div></div></div></body></html>
注意：如果小div没有绝对定位或相对定位，且大div没有border，那么小div的margin实际上踹的是“流”，踹的是这“行”。如果用margin-top，大div整体也掉下来了。如下：
方法二、如果给大div加一个border，使大div，小div都不定位，用小div的margin去挤大div，实现小div居中。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px
height: 600px
background-color: orangered
border: 1px solid white
}
.son{
width: 300px
height: 200px
background-color: lawngreen
margin: 200px 150px
}
</style></head><body><div><div></div></div></body></html>
显示结果如下：
方法三、小div绝对定位，大div相对定位，定位到大盒子的宽高一半的位置，再上下各margin负的自己宽高的一半
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px
height: 600px
background-color: orangered
position: relative
}
.son{
width: 300px
height: 200px
background-color: lawngreen
position: absolute
top: 50%
left: 50%
margin-top: -100px
margin-left: -150px
}
</style></head><body><div><div></div></div></body>
</html>
显示结果如下：
扩展资料：
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。工程上，“子绝父相”有意义，父亲元素没有脱标，儿子元素脱标在父亲元素的范围里面移动。
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto失效。
display:inline和display:inline-block，会使margin:0 auto失效。
固定宽度的盒子才能使用margin:0 auto居中
