天天看点

固定高度的div在屏幕中居中方法

如何将一个固定高度的div居中在屏幕中间呢?

先来看个例子,定义一个div并设置其高度为600px;

html代码:

<div class='a'></div>      

css样式代码:

.a{
    height:600px;
    background-color:#333;
}      

让div一直待在屏幕中间其实很简单,只需要在css代码中加上短短几句

.a{
    height:600px;
    background-color:#333;
    position:absolute;
    top:50%;
    margin-top:-300px;
}      

注意:-300px不是巧合,是该div的高度的一半