首頁 > 文章 > web前端 > html水平垂直居中的問題

html水平垂直居中的問題

高洛峰原創: 2017-02-24 10:41:261335瀏覽

最近遇到很多居中的問題，就花點時間總結了一下放在這裡，以後找也方便

#1.居中文字

<p class="wrap">
      我在中间……
</p>
.. height+line-height+text-center（只能居中单行）
.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
    line-height: px;
}

ps:text-align:center只是將元素下面的內聯元素置中顯示
1.2display:table-cell (多行固定高度居中)

.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center; 
    display:table-cell; 
    vertical-align: middle;
}

display:table-cell：ie67不管用,最好配合display:table;一起用

#ie67下：（以後也不用了，不過也放這兒吧）
方法一：（透過em標籤高度與父級等高，所以span和em居中就相當於span在父級居中）

<p class="wrap">
   <span>
       我在中间…… 我在中间…… 我在中间…… 我在中间……
   </span>
   <em></em>
</p>
 .wrap{
     width:px; 
     height:px;
     border:px solid red; 
     text-align: center;
 }
 .wrap span{
     vertical-align: middle;
     display:inline-block; 
    width:px;
}
.wrap em{
    height:%;
    vertical-align: middle; 
    display:inline-block;
}

方法二：（透過給子元素增加一個絕對定位的父級標籤，再配合子元素的相對定位水平垂直居中）

<p class="wrap">
    <span class="span">
       <span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
    </span>
</p>
 .wrap{
     width:px; 
     height:px;
     border:px solid red;
     display:table;
     position:relative; 
     overflow: hidden;
 }
 .wrap .span{
    display:table-cell; 
    vertical-align: middle; 
    text-align: center;
    *position:absolute;
    top:%;
    left:%;
}
.wrap .span{
    *position:relative;
    top:-%;
    left:-%;
}

1.3padding（內填充，不用多說）

.wrap{
    width:px;
    border:px solid red;
    padding:px ;
}

#2.居中元素

<p class="wrap">
    <span></span>
</p>

2.1position:absolute+margin負值（必須要有寬高，才能計算margin）

 .wrap{
     width:px; 
     height:px;
     position:absolute; 
     top:%; 
     left:%; 
     margin-top:-px; 
     margin-left:-px;
     border:px solid red;
}
.wrap span{ 
    width:px; 
    height:px; 
    background:red;
    position: absolute; 
    top:%; 
    left:%; 
    margin-top:-px; 
    margin-left:-px;
}

#ps：CSS實作p水平居中和上下垂直居中

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>上下垂直居中 在线演示 pCSS5</title>  
<style>  
#main {  
   position: absolute;  
   width:400px;  
   height:200px;  
   left:50%;  
   top:50%;  
   margin-left:-200px;  
   margin-top:-100px;  
   border:1px solid #00F  
}  
/*css注释：为了方便截图，对CSS代码进行换行*/  
</style>  
</head>  
<body>  
   <p id="main">p水平居中和上下垂直居中<a href="http://www.pcss5.com/">pCSS5</a></p>  
</body>  
</html>

水平垂直居中原理介紹
這裡使用了絕對定位position:absolute，使用left和top設定物件距離上和左為50%，但如果設定50%，實際上盒子是沒有實現居中效果，所以又設定margin-left:-200px;margin-top:-100px ;，這裡有個技巧是，margin-left的值是寬度一半，margin-top的值也是物件高度一半，同時設定為負，這樣就實現了水平和垂直居中。

更多html水平垂直居中的問題相關文章請關注PHP中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML常用标签及html标签的特点下一篇：HTML设计模式笔记整理

看更多