让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属性在实际项目中的应用。但愿对你有帮助                                         ---不青春