码迷,mamicode.com
首页 > Web开发 > 详细

css 居中,中央

时间:2015-07-29 17:07:04      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

在我的技巧里,有4中居中中央的方法:

 

1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x;

这是绝对定位的方法,通过算法移动,坏处就是必须知道element的height & width。

 

2.vertical align middle

在element 里,只要知道父层的高,子层就能通过vertical align middle移动到中间,当然,父层同时也要有text align center,或者子层margin auto; display:block;

 

3.在table里

就是table tr td 里的element是可以简单的居中。坏处就是table和tr必须height 100%; width:100%

 

4.自己模拟table css

 

5. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="height">
<head>
    <title></title>
    <style>
        *{
            margin:0; 
            height:0;
        }
        .height{
            height:100%;
        }
        .body{
            height:100%;
            background-color:red;
            overflow:hidden;
            text-align:center;
            position: relative;
        }
        .body::after {
            content: "";
            vertical-align: middle;
            display: inline-block;
            width: 1px;
            height: 100%;
        }
        .content{
            display:inline-block;
            vertical-align:middle;
            width:500px;
            background-color:white;
            padding:50px;
            position: relative;
        }
    </style>
</head>
<body class="body">
    <div class="content">asd</div>
</body>
</html>

这也是一样的原理,只是自作了一个after的elem。

 

css 居中,中央

标签:

原文地址:http://www.cnblogs.com/stooges/p/4686408.html

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