css 如何让盒子垂直居中,css 盒子垂直居中

面试的时候经常会被问到这样一个题目：让一个元素中内容垂直居中怎么做。其实之前，我就会两种，line-height和table-cell，

今天做项目，遇到了这个问题，就系统的查了一下，总结一下方法：

1、line-height

div{

height: 100px;

line-height:100px;

text-align:center;

}

这样就能让div中的文字水平垂直居中了

2、display:table-cell

table-cell这个属性是在看head first 书的时候学习的，通过display 设置为table table-row table-cell，让元素以表格的样子显示。

.out{

display:table;

}

.inner{

display: table-cell;

vertical-align: middle;

}

3、CSS3的flex布局

div{

/*设置为伸缩容器*/

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

/*水平居中*/

-webkit-box-pack: center;/*旧版本*/

-moz-box-pack: center;/*旧版本*/

-ms-flex-pack:center;/*混合版本*/

-webkit-justify-content:center;/*新版本*/

justify-content: center;/*新版本*/

/*垂直居中*/

-webkit-box-align: center;/*旧版本*/

-moz-box-align: center;/*旧版本*/

-ms-flex-align: center;/*混合版本*/

-webkit-align-items: center;/*新版本*/

align-items: center;/*新版本*/

}

4、使用padding，这需要知道确定的高度

5、CSS3的transform来实现

.center-vertical{

position: relative;

top:50%;

transform:translateY(-50%);

}.center-horizontal{

position: relative;

left:50%;

transform:translateX(-50%);

}

转自：http://blog.csdn.net/xiaozhuxmen/article

面试的时候经常会被问到这样一个题目：让一个元素中内容垂直居中怎么做。其实之前，我就会两种，line-height和table-cell，今天做项目，遇到了这个问题，就系统的查了一下，总结一下方法：

1、line-height

div{

height: 100px;

line-height:100px;

text-align:center;

}

这样就能让div中的文字水平垂直居中了

2、display:table-cell

table-cell这个属性是在看head first 书的时候学习的，通过display 设置为table table-row table-cell，让元素以表格的样子显示。

.out{

display:table;

}

.inner{

display: table-cell;

vertical-align: middle;

}

3、CSS3的flex布局

div{

/*设置为伸缩容器*/

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

/*水平居中*/

-webkit-box-pack: center;/*旧版本*/

-moz-box-pack: center;/*旧版本*/

-ms-flex-pack:center;/*混合版本*/

-webkit-justify-content:center;/*新版本*/

justify-content: center;/*新版本*/

/*垂直居中*/

-webkit-box-align: center;/*旧版本*/

-moz-box-align: center;/*旧版本*/

-ms-flex-align: center;/*混合版本*/

-webkit-align-items: center;/*新版本*/

align-items: center;/*新版本*/

}

4、使用padding，这需要知道确定的高度

5、CSS3的transform来实现

.center-vertical{

position: relative;

top:50%;

transform:translateY(-50%);

}.center-horizontal{

position: relative;

left:50%;

transform:translateX(-50%);

}

css盒子垂直居中

首先父盒子包住子盒子

让div盒子相对父盒子垂直居中的几种方法

div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

CSS水平垂直居中总结

行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center;

html中元素盒子垂直居中的实现方法

...

css盒子模型基础，margin-top塌陷，元素溢出

现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接   一. 初识盒子模型   例子1,测试盒子各属性设置  

深入理解CSS盒子模型

在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型示意图 ...

五种方法让CSS实现垂直居中

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

CSS盒子模型的理解

标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

随机推荐

KMP--Cyclic Nacklace

题目网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110060#problem/D Description CC always be ...

(栈)栈 给定push序列，判断给定序列是否是pop序列

题目: 输入两个整数序列.其中一个序列表示栈的push顺序,判断另一个序列有没有可能是对应的pop顺序.为了简单起见,我们假设push序列的任意两个整数都是不相等的. 比如输入的push序列是1.2. ...

测试最新的log4cplus1.1.2版

#include "stdafx.h" #include class AB{ public:     void do_test()     {    ...

前端通信：SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新，代码热修复案例)

距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...

【C#】判断字符串中是否包含指定字符串,contains与indexof方法效率问题

#方法一:使用string.Contains方法 string.Contains是大小写敏感的,如果要用该方法来判断一个string是否包含某个关键字keyword,需要把这个string和这个key ...

day08文件操作的三步骤，基础的读，基础的写，with...open语法，文件的操作模式，文件的操作编码问题，文件的复制，游标操作

复习 ''' 类型转换 1.数字类型:int() | bool() | float() 2.str与int:int('10') | int('-10') | int('0') | float('-.5 ...

Vue系列之 => 结合ajax完成列表增删查