先写上html代码，如图，内容很简单，就是一个div里有一段文本。
02再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。
03如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。
04要让文本水平居中，我们可以添加样式：text-align: center
要让文本垂直居中，我们可以添加样式： vertical-align: middle和display: table-cell
05添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。
css中的vertical-align属性设置元素的垂直对齐方式，可能的值：
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>
div+css实现文字垂直居中的五种方法：1、把文字放到table中，用vertical-align property 属性来实现居中。
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
2、使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
#content {
position: absolute
top: 50%
height: 240px
margin-top: -120px/* negative half of the height */
}
<div class="content">Content goes here</div>
3、在 content 元素外插入一个 div。设置此 div height:50%margin-bottom:-contentheight。
content 清除浮动，并显示在中间。
<div id="floater">
<div id="content">Content here</div>
</div>
#floater {
float: left
height: 50%
margin-bottom: -120px
}
#content {
clear: both
height: 240px
position: relative
}
4、使用 position:absolute，有固定宽度和高度的 div。这个 div被设置为 top:0bottom:0。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto会使它居中。使用 margin:auto使块级元素垂直居中即可
<div id="content">Content here</div>
#content {
position: absolute
top: 0
bottom: 0
left: 0
right: 0
margin: auto
height: 240px
width: 70%
}
5、将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
<div id="content">Content here</div>
#content {
height: 100px
line-height: 100px
}
