CSS 控制元素 上下左右居中

不说废话，直接 搞起.....

首先，我们将题目 《css控制元素上下左右居中》 分析一下哈，我是将其分成了4部分信息：

　　1. CSS控制： 只用 CSS 来达成目的

　　2. 元素： 　　不只是div，还包括img + and so on ..... (其实 原理都一样啦，掌握了div的居中法，其它的也可以 扩展实现)

　　3. 左右居中

　　4. 上下居中

ok, 实际上呢 我们要解决的问题 就两点，1. 左右居中  and  2. 上下居中 

 

左右居中: 

　　#method.

　　　　-->. margin:0 auto; 即，margin-left: auto; margin-right: auto; 是核心，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>左右居中</title>
    <style type="text/css">
        html,body{
            margin: 0; padding: 0; 
        }
        .box {
            position: relative;         /*这个可以去掉 看看效果哦，注意会有变化啊*/
            width: 800px;               /*宽*/
            height: 600px;              /*高*/
            background-color: rgba(212,66,33,.86);
            margin: 0 auto;  
        }
        .Absolute-Center {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: auto;
        }
 
    </style>
</head>
<body>

    <div class="box">
        <div class="Absolute-Center" >
            我是要居中的元素
        </div>
    </div>

</body>
</html>
View Code

 

效果图：

 

 

上下居中： 

　　在介绍方法之前，我先声明一下， 这里的 上下居中法，都是已知 height的，总结分两种情况，

　　　　1. 具体值 height

　　　　2. 百分比 height，但无论哪种形式的 height，应该都可以归为 已知 height。

　　下面说一说，百分比height 的两种需要注意的情景：

　　情景一： position: absoute; top: 0; left: 0; width: xx%; height: xx%; 　

　　　　　　position: absolute;  -->  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　　　　　所以，它的百分比height = 相对于 static 定位以外的第一个父元素的height;

　　情景二： position:fixed; top:0; left:0; width:xx%; height:xx%;　　　 

　　　　　　position: fixed; --> 生成绝对定位的元素，相对于浏览器窗口进行定位。　　　　　　　　　　　　  

                  所以，它的 百分比height = 相对于浏览器窗口高度的height;

　　通过以上的 声明分析，我总结的 上下居中，总体上分为 四种方法，针对 两种场景：

　　两种场景：

　　　　　　　　1. 未脱离文档流 定位的元素（position：static || relative）

　　　　　　　　2. 脱离文档流  定位的元素（position: absolute || fixed）

　　ok,该了解的都了解了，下面进入正题，介绍方法。

 

　　  #Method1.  

　　　　-->. 子容器绝对定位，top:0，bottom:0，margin: auto

　　　　即，父元素 用相对定位, 子元素 用绝对定位 ( relative --> absolute )，上代码：

　　　　-->. 优点：设置起来比较简单，使用范围较广；

　　　　-->. 缺点：需要子容器有一个固定的高，或百分比自适应于外部。它的高度不能是height:auto； 兼容性 IE8+；

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>上下左右居中</title>
    <style type="text/css">
        html,body{
            margin: 0; padding: 0; 
        }
        .box {
            position: relative;         /*这个可以去掉 看看效果哦，注意会有变化啊*/
            width: 600px;               /*宽*/
            height: 400px;              /*高*/
            background-color: rgba(212,66,33,.86);
            margin: 0 auto;  
        }
        .Absolute-Center {
            width: 160px;
            height: 80px;
            background-color: green;
            position: absolute; top: 0; bottom: 0; left: 0; right: 0;   /*css溢出法*/
            margin: auto;
        }
 
    </style>
</head>
<body>

    <div class="box">
        <div class="Absolute-Center" >
            我是要居中的元素
        </div>
    </div>

</body>
</html>
View Code

 

 

效果图：

 

　　#method2.

　　　　-->. 子容器相对定位，top: 50%，translateY(-50%)

　　　　即，父元素 用相对定位，子元素 用相对定位 ( relative --> relative )，上代码：

　　　　-->. 优点：只设置子元素的属性即可，无需过多计算；

　　　　-->. 缺点：应用到了CSS3的translateY,所以 兼容性 IE9+；

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>上下左右居中</title>
    <style type="text/css">
        html,body{
            margin: 0; padding: 0; 
        }
        .box {
            position: relative;          父元素定位方式
            /*position: absolute; left:0; right:0;*/
            /*position: fixed; left:0; right:0; */
            width: 600px;               /*宽*/
            height: 400px;              /*高*/
            background-color: rgba(212,66,33,.86);
            margin: 0 auto;
             
        }
        .Absolute-Center {
            width: 160px; height: 80px; background-color: green;

            position: relative;
            top: 50%;
            -moz-transform: translateY(-50%);  /*向上平移 自身的50%*/
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            margin: auto;
        }
 
    </style>
</head>
<body>

    <div class="box">
        <div class="Absolute-Center" >
            我是要居中的元素
        </div>
    </div>

</body>
</html>
View Code

 

效果图：

 

 

　　#method3.

　　-->. 子元素 1：float;

　　　　子元素 2：clear:both;  

　　　　float 元素的 margin-bottom 值 = content 的 height 的值的负一半;

　　-->. 优点：position:relative;时，无需声明 父元素的定位

　　-->. 缺点：需要一个同子元素 同级的 float元素辅助；需要手动计算 float 元素的 margin-bottom 的值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中 float元素 + clear:both;</title>
    <style>
        html,body{
            margin: 0; padding: 0;
        }
        h3 { background-color: #3366ee; color: white; padding: 5px; }
        h4 { background-color: #ee6633; color: white; padding: 5px; margin-top: 10px;  }
        strong { background-color: #33ee33; }

        .box {          
            background-color: rgba(212,66,33,.86);
            position:relative; width: 100%; height: 500px; top: 0; left: 0; 
            /*position:fixed; width: 100%; height: 100%; top: 0; left: 0;   */
            /*position: absolute; width: 100%; height: 100%; top: 0; left: 0; */
        }
        .floater {
            /*重点在这里：floter的margin-bottom值 = content的height的值的负一半*/
            float:left; height:50%; margin-bottom:-50px;                    
        }
        .content {
            clear:both; 
            width:100px; 
            height:100px;  
            background-color: #ccc;
            margin: 0 auto;
        }
    </style>    
</head>
<body>
    <h3>利用 设置一个浮动元素的方法 上下左右居中</h3>
    <div class="box">
        <div class="floater"></div>
        <div class="content">XO</div>
    </div>

</body>
</html>
View Code

 

　　

 效果图：

 

　　#method4.

　　　　-->. 子元素绝对定位，top:50%; margin-top: (自身高度的一半)；

　　　　-->. 优点：只操作子元素的css属性，较为简单

　　　　-->. 缺点：子元素 和 父元素都需要设置position；需要手动计算 margin-top 的值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下左右居中</title>
    <style>
        html,body{
            margin: 0; padding: 0;
        }
        h3 { background-color: #3366ee; color: white; padding: 5px; }
        h4 { background-color: #ee6633; color: white; padding: 5px; margin-top: 10px;  }
        strong { background-color: #33ee33; }

        .box {            
            background-color: rgba(212,66,33,.86);
            position:relative; width: 100%; height: 500px; top: 0; left: 0; 
            /*position:fixed; width: 100%; height: 100%; top: 0; left: 0;     */
            /*position: absolute; width: 100%; height: 100%; top: 0; left: 0; */
        }
        .Absolute-Center {
            background-color: green;
            /*上下居中*/
            position: absolute;
            width: 160px;
            height: 80px;
            top: 50%;
            margin-top: -40px;
            /*左右居中*/
            left:0; right: 0; margin-left: auto; margin-right: auto;
        }

    </style>    
</head>

    <div class="box">
        <div class="Absolute-Center" >
            我是要居中的元素
        </div>
    </div>

</body>
</html>
View Code

 

效果图：

 

介绍完毕！！！ 

就在我快要写完这篇博文时，突然在网上 发现了一篇大神 写的文章，详细 总结了 垂直居中的方法，突然发现，差距还是蛮大的，任重而道远，还需努力啊.....

这是大神的文章：共勉  《整理：子容器垂直居中于父容器的方案》

希望对同行们 有帮助，

抬头一看，已是凌晨1点半， 不行了，不行了，睡了..... GOOD NIGHT!!!

 

 

 

 

 

 

 

 

 

 

 

 

　　　　

 

 

 

 

 

 

 

　　

 

posted @ 2016-11-18 01:43  驸马爷  阅读(39168)  评论(0)  编辑  收藏  举报