CSS 控制元素 上下左右居中
不说废话，直接 搞起.....
首先，我们将题目 《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 控制元素 上下左右居中的更多相关文章
- div元素上下左右居中
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- css控制元素 水平垂直居中
控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...
- css绝对定位元素实现居中的几个方法
一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...
- CSS中元素各种居中方法（思维导图）
前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...
- css控制元素高度自适应
可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...
- css div图片上下左右居中
<style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...
- CSS控制元素背景透明度总结
方法一:CSS3的background rgba filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColor ...
- 使一个div元素上下左右居中
第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...
随机推荐
- 向量类Vector
Java.util.Vector提供了向量(Vector)类以实现类似动态数组的功能.在Java语言中.正如在一开始就提到过,是没有指针概念的,但如果能正确灵活地使用指针又确实可以大大提高程序的质量, ...
- 尽管以C++为基础，但 Java 是一种更纯粹的面向对象程序设计语言
“尽管以C++为基础,但 Java 是一种更纯粹的面向对象程序设计语言”. 无论C++还是Java 都属于杂合语言.但在 Java 中,设计者觉得这种杂合并不象在 C++里那么重要.杂合语言 允许采用 ...
- redis php 实例二
前面一篇博客主要是string类型,list类型和set类型,下面hash类型和zset类型 1,hset 描述:将哈希表key中的域field的值设为value.如果key不存在,一个新的哈希表被创 ...
- xcode 运行 lua版本崩溃 解决方案
问题描述:运行到LuaStack::init() 崩溃 原因: luajit不支持arm64 解决方案:编译luajit64位静态库 a.可以直接下载别人编译好的库,然后直接覆盖cocos2d\ext ...
- svn服务器配置 for mac
本文转载至 http://blog.sina.com.cn/s/blog_5e42f31a010156z4.html 1.找到合适的目录,新建一个版本库的目录:mkdir svn 创建版本库:sv ...
- EF 更新操作 lambda解释+=
我曾写过一个EF批量更新.删除的博客,后来操作的过程中经常遇到更新字段,但是要在原来的基础上计算的情况,我就先去获取一遍数据然后再计算,最后再去更新,显然这个操作是很复杂的 var guest = d ...
- 【BZOJ3996】[TJOI2015]线性代数 最大权闭合图
[BZOJ3996][TJOI2015]线性代数 Description 给出一个N*N的矩阵B和一个1*N的矩阵C.求出一个1*N的01矩阵A.使得 D=(A*B-C)*A^T最大.其中A^T为A的 ...
- maven 的构建异常 Could not find artifact ... and 'parent.relativePath'
完整的异常提示: Non-resolvable parent POM: Could not find artifact com.ecp:ecp-main:pom:0.0.1-SNAPSHOT and ...
- 160812、apache milagro分布式安全认证系统
java32位.64位及js的代码:http://pan.baidu.com/s/1cqnwuE 一.云链接为中心的软件及需要互联网规模物联网设备 二.利用双线性密码学分发加密操作和分裂的加密参数 三 ...
- Byzantine failures
https://baike.baidu.com/item/拜占庭将军问题/265656?fr=aladdin 拜占庭将军问题(Byzantine failures),是由莱斯利·兰伯特提出的点对点通信 ...