码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-09-06 12:14:57      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

实现垂直方向margin:auto居中 
writing-mode:vertical-lr;改变垂直方向
技术分享
 技术分享
<!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 id="father">
      <div id="son">
 
      </div>
</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>

 

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

标签:

原文地址:http://www.cnblogs.com/yatao/p/5844890.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!