上下左右居中,上下左右居中怎么设置

将乐信息网 http://www.jianglexinxi.cn 2020-10-18 08:38 出处:网络
上下左右居中,上下左右居中怎么设置,CSS 控制元素 上下左右居中 不说废话,直接 搞起.....

上下左右居中,上下左右居中怎么设置,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 
 div 
 我是要居中的元素
 /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 
 div 
 我是要居中的元素
 /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 
 div 
 我是要居中的元素
 /div 
 /div 
 /body 
 /html 
View Code

 

效果图:

上下左右居中,上下左右居中怎么设置

 

 

#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 
 div /div 
 div 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 
 div 
 我是要居中的元素
 /div 
 /div 
 /body 
 /html 
View Code

 

效果图:

上下左右居中,上下左右居中怎么设置

 

介绍完毕!!! 

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

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

希望对同行们 有帮助,

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文标题:上下左右居中,上下左右居中怎么设置
http://www.jianglexinxi.cn/yanergaozhi/522385.html

0

精彩评论

暂无评论...
验证码 换一张
取 消