【writing-mode与absolute，auto】垂直居中

实现垂直方向margin：auto居中 
writing-mode:vertical-lr;改变垂直方向 ，从而使类son垂直居中，
 
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            .father{
                  width: 100%;
                  height: 500px;
                  background: lightcoral;
                  writing-mode:vertical-lr;
            }
                  .son{
                        background: lightblue;
                        height: 200px;
                        margin:auto;
                        width: 200px;
                        }
            </style>
      </head>
      <body>
<div class="father">
      <div class="son">
 
      </div>
</div>
      </body>
</html>

 

当把类son设置为img元素时，图片并不会垂直居中，
对于图片的margin：auto；此时图片属于inline水平，并没有撑满整个容器，它的垂直方向并不存在剩余空间
因为它没有剩余的填充，所以设置auto，并没有任何变化，所以图片并不会垂直居中，这时我们可以给图片设置一个block使图片变为块级元素，让它独占一列，从而有了剩余的填充空间。

 此时图片就可以垂直居中，其原理和水平居中是一样，都需要有填充的空间

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.father{
width: 100%;
height: 500px;
background: lightcoral;
writing-mode:vertical-lr;
}
img{
background: lightblue;
height: 200px;
margin:auto;
width: 200px;
display: block;
}
</style>
</head>
<body>
<div class="father">
<img src="img/logo.jpg"/>
</div>
</body>
</html>

 

 
使用absolute，auto居中定位
设置其父类元素为relative属性，子元素为absolute属性
 

 

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            #father{
 
                  height: 500px;
                  background: lightcoral;
                position: relative;
            }
                  #son{
                        background: lightblue;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 200px;
                        height: 100px;
                        margin: auto;
                        }
            </style>
      </head>
      <body>
<div id="father">
      <div id="son">
 
      </div>
</div>
      </body>
</html>

 

posted @ 2016-09-06 10:53  桃园  阅读(275)  评论(0)  编辑  收藏  举报