文字以及div水平垂直居中.md

<div class=”content”>

    <div class=”mydiv”>

        huangyingnin!

    </div>

</div>

文字居中

水平居中text-align: center;

.mydiv{

    text-align: center;

}

垂直居中
vertical-align: middle;

.mydiv{

    height:400px;

    text-align: center;

    vertical-align: middle;

    line-height: 400px;

  }

div垂直居中

.mydiv{

   text-align: center;

   position:absolute;

   width:300px;

   height:200px;

   left:50%;

   top:50%;

   margin:-100px 0 0 -150px;

}

使用js

$(window).resize(function(){

    $(“.mydiv”).css({

        position: “absolute”,

        left: ($(window).width() - $(“.mydiv”).outerWidth())/2,

        top: ($(window).height() - $(“.mydiv”).outerHeight())/2

    });

});

$(function(){


$(window).resize();


});