先写上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>
一、使用writing-mode属性语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
运行代码发现，IE显示正常，火狐却不行，所以不建议使用writing-mode属性，下面使用模拟方法实现。
二、模拟文字竖排
代码：
ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}
ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}
此方法让li右浮动，设置li宽度和字宽度一样都是14px，这样就自动换行了。另外，“word-wrap:break-wordword-break:nomal”这句实现标点自动换行（连续字符自动换行）。
