css 垂直居中

标签：border   多行   css垂直居中   垂直   text   splay   aaaaa   ica   class   

1. line-height :单行文字垂直居中
　　适用于 按钮 下拉框 导航  原理是将单行文字的行高设定后,文字会位于行高的垂直中间位置.

2.line-height + inline-block 多对象多个元素或多行元素的垂直居中
　　将多个元素或多行元素当成一个行元素来看待,需要将这些数据多包一层,并将其设定为inline-block, 并在该inline-block对象的外层使用inline-block来代替height的设置,
　　

<style>
.box{
       width:500px;
       border:1px solid #f00;
       margin:auto;
       line-height:200px;
       text-align:center;
}
.box .content{
       display:inline-block;
       height:auto;
       line-height:1;
       width:400px;
       background:#ccc;
}
</style>

<div class="box ">
    <div class="content">
       aaaaaaaaaa<a href="">bbbbbbbbbbbbbb</a>
       cccccccccccccccccc
    </div>
</div>

3.:befor + inline-block 多对象的css垂直居中
　　:before伪类元素+inline-block 属性的写法好处在于子元素居中可以不需要特别设定高度,将:before伪类元素设定为100%高的inline-block,再搭配上将需要剧中的子元素同样设置成inline-block性质,就能使用vertical-align:minddle达到垂直居中

css 垂直居中

标签：border   多行   css垂直居中   垂直   text   splay   aaaaa   ica   class   

原文地址：https://www.cnblogs.com/moli-/p/9531273.html