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