七种css方式让一个容器水平垂直居中
阅读目录
方法一: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的原因,IE6\7不兼容
方法三: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元素垂直的如果真的要总结起来,应该有十几二十几种。不过也没必要全部掌握吧,只要大概了解一些,用起来没有副作用就行。
七种css方式让一个容器水平垂直居中的更多相关文章
- 用css让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- 公司的一个面试题:如何用css让一个容器水平垂直居中?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 如何用css让一个容器水平垂直居中
方法一: 以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半} ...
- css进阶 04-如何让一个元素水平垂直居中?
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- css 文字和子元素水平垂直居中
关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...
- 【原】用css让一个容器水平垂直
这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...
- 简述UIViewControl之间的七种传值方式~~~
将自己学习到的UIViewControl之间传值的几种方式在这里做一下总结,希望童鞋们多多支持哈--- 一.正向传值方式 这种方式传值应该是最简单的方式,我们先来建立两个视图控制器暂且称为OneVie ...
- JavaScript中七种函数调用方式及对应 this 的含义
this 在 JavaScript 开发中占有相当重要的地位,不过很多人对this这个东西都感觉到琢磨不透.要真正理解JavaScript的函数机制,就非常有必要搞清楚this到底是怎么回事. 函数调 ...
随机推荐
- android 短信助手demo
关于意图Intent: 显式意图:必须指定要激活的组件的完整包名和类名(应用程序之间耦合在一起) 一般激活自己应用的组件的时候采用显式意图 隐式意图:只需要指定动作和数据就可以(好处是应用程序之间没有 ...
- IOS之资源收集--很好的github网址
1.Nick Jensen 2.关于直播的
- eclipse执行单元测试报CreateProcess error=87的解决方法
原因是classpath的路径过长导致,在网上看了很多文章,发现解决方法有2种: 1.更改项目路径 或者 maven本地库的路径,减少classpath的深度. 2.由于这是eclipse自身的bug ...
- [docker] 管理docker容器中的数据
之前我们介绍了Docker的基本概念(前面的没翻译...),了解了如何使用Docker镜像进行工作,并且学习了网 络和容器之间的链接.这一节我们将讨论如何管理容器中及容器之间的数据. 我们将查看下面两 ...
- 手动方式安装 eclipse 的svn插件 Subversive和 Subversive SVN Connectors
0.下载配置jdk 链接:http://pan.baidu.com/s/1miIVuic 密码:mwo7 配置 JAVA_HOME .JRE_HOME 1 下载eclipse ecli ...
- Chrome 控制台 console
前言 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大了吧,说它是神器一点也不过分,很方便. ...
- 解决easy ui两次请求服务器的问题
目前该问题已经在1.4.1版本中解决了 本文引用自:http://www.cnblogs.com/Reaver/p/4056770.html,原文博主:flyreaver 我在使用过程中遇到了easy ...
- Linux 下编译安装软件,找不到共享库 xx.so 的解决办法
编译memcached时,报错没有libevent,于是下载libevent,configure , make && make install ,然后在重新安装memcache成功之后 ...
- python模块调用
1.某个模块1被调用到另一个模块2的时候,当不想模块1中的某些代码在模块2中执行时,可以在模块一种添加如下代码: if __name__ == "__main__" ...
- Redis下载及安装部署
官网介绍:Redis is an open source advanced key-value store.It is often referred to as a data structure se ...