盒子居中问题简单解决...

2019独角兽企业重金招聘Python工程师标准>>>

HTML参考

<div class="music">
    <div class="music_left"></div>
    <div class="music_right">
        <div id="img">
            <img src="images/123456.jpg">
        </div>
        <div id="divAcount">
            <span>《什么的球》</span>
        </div>
        <div id="lrc">

        </div>
    </div>
    <div class="music_bottom">
        <div class="button">
            <div class="up"></div>
            <div class="py" onclick="play()"></div>
            <div class="do"></div>
        </div>
    </div>
</div>

CSS参考

body{
    margin: 0px;
    padding: 0px;
    background: url("../images/bg.jpg") fixed no-repeat;
    background-size: cover;
}
.music{
    /*重点是这个margin水平居中*/
    margin: 0 auto;
    width: 800px;
    height: 450px;
}
.music_left{
    width: 600px;
    height: 400px;
    background:url("../images/music.gif");
    background-size: cover;
    float: left;
}
.music_right{
    width: 200px;
    height: 400px;
    background-color: #404040;
    float: left;
}
.music_bottom{
    width: 800px;
    height: 50px;
    background:url("../images/fbg.png");
    background-size: cover;
    clear: both;
}
.button{
    width: 180px;
    height: 50px;
    margin: 0 auto;
}
.up,.py,.do{
    width: 60px;
    height: 50px;
}
.up{
    background: url("../images/prev.png") no-repeat center ;
    float: left;
}
.py{
    background: url("../images/play.png") no-repeat center ;
    float: left;
}
.do{
    background: url("../images/next.png") no-repeat center ;
    float: left;
}

JavaScript参考

$(function () {
    //监测重新加载
    $(window).resize(function () {
        sx();
    });
});

//共用垂直居中方法
function sx() {
    $('.music').css('margin-top', ($(window).height() - $('.music').height()) / 2);
};
//监测刷新
window.onbeforeunload = sx();

居中示例参考:

转载于:https://my.oschina.net/mistylinux/blog/1575583