七种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到底是怎么回事. 函数调 ...
随机推荐
- 基础学习day12--多线程一线程之间的通信和常用方法
一.线程之间的通信 1.1.线程之间的通信方法 多个线程在处理统一资源,但是任务却不同,这时候就需要线程间通信. 等待/唤醒机制涉及的方法: 1. wait():让线程处于冻结状态,被wa ...
- iOS 架构模式-MVVM
iOS 架构模式-MVVM MVVM Model-View-ViewModelMVVM 其实是MVC的进化版,他将业务逻辑从VC中解耦到ViewModel,实现VC的瘦身. 做一个简单的登录判断: 创 ...
- IOS开发--常用工具类收集整理(Objective-C)(持续更新)
前言:整理和收集了IOS项目开发常用的工具类,最后也给出了源码下载链接. 这些可复用的工具,一定会给你实际项目开发工作锦上添花,会给你带来大大的工作效率. 重复造轮子的事情,除却自我多练习编码之外,就 ...
- Java之fianl修饰符
fianl修饰的变量不可以改变,一旦获得初始值,该final变量的值就不能被重新赋值. 1.final成员变量(必需由程序员显式地指定初始值) 类变量:必须在静态初始化块中或者声明该变量时指定初始值, ...
- 数据库测试DbUnit
DBUnit 的设计理念就是在测试之前,备份数据库,然后给对象数据库植入我们需要的准备数据,最后,在测试完毕后,读入备份数据库,回溯到测试前的状态: 摘自:DbUnit入门实战 DBUnit官网:ht ...
- bsearch
在java中为了避免 low+high溢出,可以用无符号右移:正数高位补0,负数高位补1 int mid = (low + high) >>> 1; 如果是在c++中,那么需要先转换 ...
- FiddlerScript修改特定请求参数下的返回值
使用场景: api/Live/GetLiveList接口: (1)Type为1,接口返回直播列表 (2)Type为2,接口返回回放列表 现在想修改直播列表的返回值 思路: 利用FiddlerScrip ...
- 【nginx】配置文件的优化
1.编译安装过程优化 在编译Nginx时,默认以debug模式进行,而在debug模式下会插入很多跟踪和ASSERT之类的信息,编译完成后,一个Nginx要有好几兆字节.在编译前取消Nginx的deb ...
- spinner下拉列表
xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...
- IP工具类-自己动手做个ip解析器
IP工具类-自己动手做个ip解析器 一.资料准备 导入依赖包: