文档章节

七种css方式让一个容器水平垂直居中

AA海纳百川
 AA海纳百川
发布于 2016/10/17 09:53
字数 989
阅读 28
收藏 5

方法一:position加margin

方法二: diaplay:table-cell

方法三:position加 transform

方法四:flex;align-items: center;justify-content: center

方法五:display:flex;margin:auto

方法六:纯position

方法七:兼容低版本浏览器,不固定宽高

总结

这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。

这种方法比较多,本文只总结其中的几种,以便加深印象。

效果图都为这个:

方法一:position加margin

<div class="wrap">
    <div class="center"></div>
</div>
/**css**/ .wrap { width: 200px; height: 200px; background: yellow; position: relative;
} .wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
}

兼容性:主流浏览器均支持,IE6不支持

方法二: diaplay:table-cell

<!-- html -->
<div class="wrap">
     <div class="center"></div>
</div>
/*css*/ .wrap{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center;
} .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green;
}

兼容性:由于display:table-cell的原因,IE67不兼容

方法三:position加 transform

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>
/* css */ .wrap { position: relative; background: yellow; width: 200px; height: 200px;} .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px;
}

兼容性:ie9以下不支持 transform,手机端表现的比较好。

方法四:flex;align-items: center;justify-content: center

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>
/* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;
} .center { background: green; width: 100px; height: 100px;
}

移动端首选

方法五:display:flex;margin:auto

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>
/* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; 
} .center { background: green; width: 100px; height: 100px; margin: auto;
}

移动端首选

方法六:纯position

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>
/* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;
} /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px; 
  
} /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;
}

兼容性:适用于所有浏览器

方法六中的方法一计算公式如下:

子元素(conter)的left值计算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;

子元素(conter)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;

方法二计算公式:

left值固定为50%;

子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;

top值也一样,固定为50%

子元素的margin-top= -(子元素的高/2)=-100/2= -50px;

方法七:兼容低版本浏览器,不固定宽高

<!-- html -->
<div class="table">
    <div class="tableCell">
        <div class="content">不固定宽高,自适应</div>
    </div>
</div>
/*css*/ .table { height: 200px;/*高度值不能少*/ width: 200px;/*宽度值不能少*/ display: table; position: relative; float:left; background: yellow;
} .tableCell { display: table-cell; vertical-align: middle; text-align: center;        
    *position: absolute; padding: 10px;
    *top: 50%;
    *left: 50%;
} .content {
    *position:relative;
    *top: -50%;
    *left: -50%; background: green;
}

暂时总结上面的七种,这种方法太多,其实只要习惯了其中的一两种也就够用了。

总结

如果是移动端,那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况,快、准、狠

也就是用 flex; align-items: center; justify-content: center;

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>
/* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;
} .center { background: green; width: 100px; height: 100px;
}

或者display:flex;margin:auto;

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>
/* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex;
} .center { background: green; width: 100px; height: 100px; margin: auto;
}

如果是PC端,要考虑兼容性的话。方法六是不错滴,也就是纯position。

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>
/* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;
} /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;  
  
} /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;
}

如果PC端的中间的元素高度不固定,那么就用方法七即可,代码就不复制了

这种css元素垂直的如果真的要总结起来,应该有十几二十几种。不过也没必要全部掌握吧,只要大概了解一些,用起来没有副作用就行。

本文转载自:http://www.phpxs.com/post/5400/

AA海纳百川
粉丝 6
博文 53
码字总数 4829
作品 0
南宁
程序员
私信 提问
集中コレクション,CSS垂直居中最强合集,看看你喜欢哪种?

我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题,但一直以来最麻...

前端大佬
05/11
0
0
16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto
2017/12/19
0
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
16
0
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
0
0
浅谈CSS中的居中

css居中在我们平常的页面布局中应用的十分频繁,掌握css各种居中方式也是很有必要的,所以对各种居中方式进行一个小小的总结。 居中主要分为垂直居中和水平居中,而不同元素之间的居中也有所...

Leisured
2016/08/24
19
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 你不会知道老板在女装大佬面前多主动

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享闻音合唱团的单曲《君をのせて(天空之城)》: 喜欢这样的合唱#今日歌曲推荐# 《君をのせて(天空之城)》- 闻音合唱团 手机党...

小小编辑
31分钟前
202
4
两数的最大公约数

hello,复习一下数学知识! 最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。 因为之前做一个小功能,需要先计算一下数组的最大公约数,所以我就想记录一下...

woshixin
今天
3
0
学习Node.js的电子书大全

在这里,与大家分享一批很有用的 Node.js 的电子书资源。Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写...

jay603
今天
69
0
《伟大的博弈》读后感作文4100字

《伟大的博弈》读后感作文4100字: 五一小长假,作为工厂员工,没能跟上大家放假的步伐,窝家里两天没出门,逼着自己看完《伟大的博弈》,感触颇多。似乎不能消化,先记录第一遍作为幼稚的见...

原创小博客
昨天
5
0
单点登录-基于Redis+MySQL实现单点登录(SSO)

1. 为什么要用单独登录? 主要便于公司内部多系统统一认证授权管理,一次登录可访问多个跨域系统,也同时更加方便统一管理用户登录(员工离职需要拿掉登录权限、统计所有用户对系统的登录请求...

秋日芒草
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部