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

});