讓div盒子相對父盒子垂直居中的幾種方法

時間 2019-11-13

標籤 div 盒子相對垂直居中幾種方法欄目 CSS 简体版

原文原文鏈接

div相對於父盒子垂直居中的幾種方法，以前在網上看到不少種方法，確實說的很對，也很具體，可是我感受對於初學者來講，一目瞭然是最重要的，因此，我把很高深的技巧，和很複雜的css樣式都剔除掉，旨在讓更多人能看懂。css

具體事例方法以下：html

1. 其實這裏的重點是，必定要給父盒子設置相對定位瀏覽器

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<style>

 #one{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;  //重點：必須給父元素設置相對定位
    }

#two{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;   // 給父元素設置絕對定位
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;

}




</style>
<body>
<div id="one">
 <div id="two"></div>
</div>


</body>
</html>

2. 很少說規則同上（只有思想不太同樣）spa

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>

  #one{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }

    #two{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
  


</style>
<body>
<div id="one">
    <div id="two"></div>
    <img src="" alt=""/>
</div>


</body>
</html>

最後說一下 讓<img>垂直定位的方法

如下是html結構：

<div id="one">
    <div id="two"></div>
    <img src="" alt=""/>
</div>

css樣式：

img {
         display:table-cell;
         text-align:center;
         vertical-align:middle;
 }

相信不少初學者對display：table-cell不是太瞭解，下面我說一下：

display:table-cell屬性就是讓標籤元素以表格單元格的形式呈現，相似於td標籤。目前IE8+以及其餘現代瀏覽器都是支持此屬性
的，可是IE6/7只能對你說sorry了，這一事實也是大大制約了display:table-cell屬性在實際項目中的應用。但願對你有幫助                                         ---不青春

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。