整理div左右垂直居中解决方案

<style type="text/css">
.main{
    position:absolute;
    top:50%;
    left:50%;
    width:400px;
    height:100px;
    margin-top:-50px;
    margin-left:-200px;

    border:2px solid yellow;
    line-height:30px;
    font-size:16px;
    }
.main2{
    font-size:16px;
	color:blue;
}
</style>
<div class="main">Div居中:使用div绝对位置定位,解决垂直居中问题,需确定div宽度和高度。</div>
<div style="text-align:center;height:400px;vertical-align:middle;line-height:400px;border:1px dashed black;"><p class="main2">文字居中:text-align:center;左右vertical-align上下支持所有浏览器,需确定外廓的高度。line-height与height一致<p></div>
<div style="position:absolute;bottom:10px;left:50%;color:grey;font-size:12px;width:200px;margin-left:-100px;">Q群码农三七二十一(2177712)撞墙整理</div>

猜你喜欢

转载自blog.csdn.net/Wallbanger/article/details/16858099