CSS设置DIV居中

最新推荐文章于 2023-08-13 00:34:20 发布

长江

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量3.9k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.垂直+水平居中：
<style>
#mid{ 
position:absolute; 
top:50%; 
left:50%; 
margin:-150px 0 0 -150px; 
width:300px; 
height:300px; 
border:1px solid red; 
} 

</style>
<div id=mid></div> 

注意，其中margin:-150px 0 0 -150px; 
第一个150是高度的一半，第四个150是宽度的一半

2.简单的内容居中

div {   
        height:25px;   
        line-height:25px;   
        overflow:hidden;   
 }   

<div>现在我们要使这段文字垂直居中显示！</div>

3.DIV中的DIV居中

div1{   
    height:400px;   
 display:table;   
}   
div2{   
  vertical-align:middle;   
    display:table-cell;   
  width:760px;   
}  

<div class="div1">
<div class="div2">
<input >现在我们要使这段文字垂直居中显示！</div>
</div>