做前端的时候水平居中很容易做到。垂直居中一般怎么做呢?

2015-08-15 08:00:07 +08:00
 cevincheung
//水平居中是在一条横向的直线的中点是吧?

水平居中的话一般都是margin:0 auto;就可以了。垂直呢?有什么简单的方法么?

4802 次点击
所在节点    前端开发
27 条回复
cqcn1991
2015-08-15 08:04:59 +08:00
…老大难问题…
Septembers
2015-08-15 08:07:23 +08:00
display: table-cell; vertical-align: middle;
但是要 定宽,定高
pagecho
2015-08-15 08:11:31 +08:00
sadscv
2015-08-15 08:15:36 +08:00
用line-height去控制。
br00k
2015-08-15 08:18:00 +08:00
http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

其实也很容易,比较神奇的是第三个。还有一种是inline元素参照来垂直居中,方式很多,看自己需要使用。
br00k
2015-08-15 08:18:44 +08:00
yakczh
2015-08-15 08:23:29 +08:00
table valign="middle"
neone
2015-08-15 08:31:33 +08:00
lerry
2015-08-15 08:36:46 +08:00
lxrmido
2015-08-15 08:43:34 +08:00
top:50%;
margin-top:-50%;
airyland
2015-08-15 08:57:54 +08:00
top 50% 然后 margin translate -50% 就不用固定宽高了
coraline
2015-08-15 09:13:40 +08:00
mok502
2015-08-15 09:49:07 +08:00
Jeremial
2015-08-15 09:51:23 +08:00
比较先进的浏览器的话, 就用

position:absolute;
top: 50%;
left: 50;
transform: translate(-50%, -50%);
nine
2015-08-15 09:53:23 +08:00
yhxx
2015-08-15 09:54:02 +08:00
ghostcat
2015-08-15 10:17:45 +08:00
jiongxiaobu
2015-08-15 10:18:56 +08:00
0 0根据不同情况有不同的方法
aivier
2015-08-15 12:04:51 +08:00
css-tricks上面有一个向导,可以根据不同需求告诉你该怎么做
tinyhill
2015-08-15 12:11:03 +08:00
容器 display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/213335

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX