用css给不定高的＜div class=“tips”＞＜div＞垂直居中，请写出三种方法。

html-css021

用css给不定高的＜div class=“tips”＞＜div＞垂直居中，请写出三种方法。,第1张

1.定位top50% margin-top：-50% 2.给父级设置高和行高相等，3.用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。

有很多种实现方法，下面是用最简单的方法实现的，

思路，2个div用一个div包起来，然后让两个div浮动。然后给外面的父级进行定位。仅供参考。

<style type="text/css">

            * {margin:0px padding:0px}

.box {position:absolute top:50% left:50% width:200px height:100px margin-left:-50px margin-top:-50px}

.div1 {width:100px height:100px background:#ccc float:left}

        </style>

</head>

<body>

<div class="box">

<div class="div1"></div>

<div class="div1"></div>

</div>

</body>