用 CSS 实现元素垂直居中，有哪些好的办法？

qzmjef

1.不晓得自己高度和父容器高度的状况下, 利用绝对定位只必须以下三行：

parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); }

2.若父容器下仅有一个元素，且父元素设置了高度，则只必须运用相对定位就可

parentElement{ height:xxx; } .childElement { position: relative; top: 50%; transform: translateY(-50%); }

demo:

Edit fiddle - JSFiddle

Flex 布局：

不思虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：

parentElement{

mugong

感谢你的精彩评论，带给我新的思考角度。

明月几时有

顶楼主，说得太好了！

wrjc1hod

楼主果然英明！不得不赞美你一下！

qzmjef

楼主的文章深得我心，表示由衷的感谢！