文字以及div水平垂直居中

文字以及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(); 
});