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

首先，我们将题目 《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. 2017 ACM区域赛(南宁站) 参赛流水账

    day0: 早上四点起床赶飞机,还好没有吵醒室友导致被打死.本来想在飞机上准备一下下周的小测,结果飞机一点都不平稳,只能全程和队友吹逼聊天.下午在宾馆里和johann通关了一部合金弹头,重温了童年的经 ...

  2. 你的企业是否须要开发APP?

    移动互联网时代的到来,粗分出"新兴行业"与"传统行业".除了互联网公司,其它似乎都被归到了"传统行业".连传统行业中最传统的房地产公司代表人 ...

  3. python Virtual Environments

    Install $ pip install virtualenv Basic usage 在一个项目中创建一个虚拟环境 $ cd my_project_folder $ virtualenv venv ...

  4. ubuntu安装scala详细教程

    ubuntu14 安装scala详细教程 1.下载scala压缩包 http://www.scala-lang.org/download/ 2.建立目录,解压文件到所建立目录 $ sudo mkdir ...

  5. Android中的Manifest.permission（应用权限）整理

    ACCESS_CHECKIN_PROPERTIES 允许读/写登记数据库(checkin database),中的“properties”表,用来改变他的值来上传东西. 这个权限第三方应用无法使用. ...

  6. boost - 正则表达式xpressive

     正则表达式是一套处理文本强有力的工具: 它使用一套复杂的语法规则,可以解决文本处理领域的绝大多数问题; 而这些问题通常是字符串算法很难甚至无法解决的. C++98标准中没有内置的正则表达式支持,使得 ...

  7. AWS系列-修改RDS时间（time_zone）

    1.1 需求 数据库时间和北京时间相差8小时 开发人员发现app的时间与国内时间相差12小时,需要修改RDS的time_zone参数 1.2 打开RDS参数组 1.3 创建新的参数组 由于默认的参数组 ...

  8. python 之 多进程

    阅读目录 1. Process 2. Lock 3. Semaphore 4. Event 5. Queue 6. Pipe 7. Pool 序. multiprocessingpython中的多线程 ...

  9. Mac中pico编辑器的使用方法

    Pico是一个由华盛顿大学(University of Washington)计算与通讯研究所(Computing and Communications Group)编写并维护的文本编辑程序,在多个版 ...

  10. JavaWeb开发的一系列可能的配置

    最近电脑硬盘坏了Orz...,重装了.唉!软件什么的都要重新装,重新设置,好麻烦! 我决定写下重装javaweb开发环境的过程 1.Java的安装,配置 https://www.runoob.com/ ...