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

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

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

　　2.元素： 　　不只是div，还包括img + and so.....(其实 原理都一样啦，掌握了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>

效果图：

上下居中： 

　　在介绍方法之前，我先声明一下， 这里的 上下居中法，都是已知 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>

效果图：

　　#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>

效果图：

　　#method3.

　　-->. 子元素1：float, 子元素2：clear:both;  floter元素的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>

　　

 效果图：

　　#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>

效果图：

介绍完毕！！！

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

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

希望对同行们 有帮助，

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

　　　　

　　

CSS 控制元素 上下左右居中的更多相关文章

  1. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  3. css控制元素 水平垂直居中

    控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...

  4. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

  5. CSS中元素各种居中方法（思维导图）

    前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...

  6. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

  7. css div图片上下左右居中

    <style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...

  8. CSS控制元素背景透明度总结

    方法一:CSS3的background rgba filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColor ...

  9. 使一个div元素上下左右居中

    第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...

随机推荐

  1. 向量类Vector

    Java.util.Vector提供了向量(Vector)类以实现类似动态数组的功能.在Java语言中.正如在一开始就提到过,是没有指针概念的,但如果能正确灵活地使用指针又确实可以大大提高程序的质量, ...

  2. landa语法

    sg_orm看当前sql信息 db.IsEnableLogEvent = true; db.LogEventStarting = (sql, pa) => { var t = 0; }; //出 ...

  3. 你 get 了无数技能，为什么一事无成

    前 几日看到阮一峰老师的发的一句话,颇有感慨,「你只是坐在电脑前,往网上发表了一段文字或者一张图片,随便什么,就能够接触到多少陌生的灵魂.这就是我热 爱互联网的原因」.我打心底认为这是一个最好的时代, ...

  4. MySQL服务停止，无法启动了~

    怎么解决mysql服务无法启动的问题

  5. Django 后台 无法显示文章标题

    我们会发现所有的文章都是叫 **object,这样肯定不好,比如我们要修改,如何知道要修改哪个呢? 我们修改一下 blog 中的models.py # coding:utf-8 from django ...

  6. JB开发之三 [jailbreak，越狱技术积累]

    很兴奋,我开始了进行JB的开发 1.杀死当前的APP [(SpringBoard *)[UIApplicationsharedApplication] _killThermallyActiveAppl ...

  7. mysql数据库如何设置表名大小写不敏感?

    转自:https://blog.csdn.net/iefreer/article/details/8313839 在跨平台的程序设计中要注意到mysql的一些系统变量在windows和linux上的缺 ...

  8. WM_MOUSEWHEEL消息

    使用WM_MOUSEWHEEL       需要把CWnd设定为Focus  ON_WM_MOUSEWHEEL(   )     CWnd::OnMouseWheel         afx_msg  ...

  9. 160722、Javascript函数节流

    最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> < ...

  10. 【Double】double精度问题和int、long除不尽取舍问题

    看了老半天,真心没搞懂,留下几篇文章,后面继续跟进吧.... 一.如何理解double精度丢失问题? - 知乎 https://www.zhihu.com/question/42024389/answ ...