DIV内文字水平垂直居中

水平居中

 text-align: center;

垂直居中

1.行高法 文字的行高和容器的高度相同

div { height:30px; line-height:30px; width:100px; overflow:hidden; }

2.内边距（padding）法

p { padding:20px 0; }

3.CSS3的transform来实现

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}
.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%);

对于translate如果你猜到了它的作用，如果想成为大神，还是停下脚步，看看这位博主的详情讲解，我是看完了，妙极了。

css3中translateY、translateX的使用_JavaAlliance-CSDN博客_translatex