css居中那些事

一、css垂直居中

   1.line-height(适用于单行文本居中)

       eg:  html:<p class="wordp">123</p>-

              css: .wordp{width:100px;line-height:50px;background:yellow;color:#fff}

   2.:befor+inline-block(多对象的垂直居中技巧)

         eg:html   <h2>123</h2>

                       <div class="box3">

                           <div class="content">

                               立马来看amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">css3精美相册效果 </a>效果吧！別忘了拖拉一下窗口看看 rwd 效果喔！

                           </div>

                        </div>

             css:

.box3{

width: 500px;

height: 250px;

border: 1px solid #f00;

margin: auto;

text-align: center;

}

.box3::before{

content:'';

display: inline-block;

height: 100%;

width: 0;

vertical-align: middle;

}

.box3 .content{

width: 400px;

background: #ccc;

display: inline-block;

vertical-align: middle;

}