总结几种居中放置的情况

我从事web前端的时间还不是很长，在工作中遇到一些居中的情况，总结了几种方法，可能有错误，欢迎指导

1、实现文字的居中：

     a、水平居中：text-align:center，垂直居中：vertical-align:middle；

     b、line-height：实现文字的垂直居中（个人比较偏爱这种文字居中）；

     c、如果是单行文本也可以用padding去撑开；

     （暂时文字只想到这几个居中方法，欢迎补充）

2、实现图片的垂直水平居中

     a、div{ width:100px; height:100px; position:relative; text-align:center; border:1px solid #cccccc; overflow:hidden;  }

            div img { position:absolute; left:50%; top:50%; margin-left:/*图片的宽度*/; margin-top:/*图片的高度*/}

    b、div{width:200px; height:200px; margin:30px auto; border:1px solid red;line-height:200px;text-align:center;}

           div img { vertical-align:middle;}

   c、<div class="outline"><div class="inline"><img src=""></div></div>

        <style>

.outline{ width:200px; height:200px; border:1px solid #cccccc; display:table;}

.inline{ display:table-cell; vertical-align:middle;}

</style>

  d、<div class="outline"><div class="inline"><img src=""></div></div>

        <style>

.outline{ width:200px; height:200px; border:1px solid #cccccc; display:table-cell; position:relative; text-align:center; vertical-align:middle;}

.inline{ *position:absolute; top:50%; left:50%;}

.inline img { *position:relative; top:-50%; left:-50%;}

</style>

   e、也可以用padding撑开

 3、实现单行文字和图片的居中

    a、<div><img src=""><span>可以自己试一下</span></div>

           <style>

div{width:200px; border:1px solid #cccccc; padding:10px; }

        div img { vertical-align:middle;}

  div span { vertical-align:middle;}

</style>

4、实现多行文字和图片的居中

   

 <div><img src=""><span>可以自己试一下</span></div>

        <style>

div{width:200px; border:1px solid #cccccc; padding:10px; }

        div img { vertical-align:middle; display:inline-block;}

  div span { vertical-align:middle; display:inline-block;}

      这种就是把文字档图片处理，设置他的display:inline-block；用一个标签包起来，设置他的垂直居中即可（参考人家的处理）

如若有错，欢迎指导，欢迎提供新的方法