transform
translateX
/translateY
:In supported browsers (most of them), you can use top: 50%
/left: 50%
in combination with translateX(-50%) translateY(-50%)
to dynamically vertically/horizontally center the element.
.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
In supported browsers, set the display
of the targeted element to flex
and use align-items: center
for vertical centering and justify-content: center
for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).
html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }
table-cell
/vertical-align: middle
:In some cases, you will need to ensure that the html
/body
element's height is set to 100%
.
For vertical alignment, set the parent element's width
/height
to 100%
and add display: table
. Then for the child element, change the display
to table-cell
and add vertical-align: middle
.
For horizontal centering, you could either add text-align: center
to center the text and any other inline
children elements. Alternatively, you could use margin: 0 auto
assuming the element is block
level.
html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }
50%
from the top with displacement:This approach assumes that the text has a known height - in this instance, 18px
. Just absolutely position the element 50%
from the top, relative to the parent element. Use a negative margin-top
value that is half of the element's known height, in this case - -9px
.
html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }
line-height
method (Least flexible - not suggested):In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height
value on the child element equal to the fixed height of the parent element.
盡管此解決方案在某些情況下有效,但值得注意的是,當(dāng)有多行文本時(shí),它不起作用 - 像這樣。
.parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }
方法 4 和 5 并不是最可靠的。選擇前 3 個(gè)之一。
如果是一行文本和/或圖像,那么很容易做到。只需使用:
text-align: center; vertical-align: middle; line-height: 90px; /* The same as your div height */
就是這樣。如果可以是多行的話(huà),那就稍微復(fù)雜一些。但 http://pmob.co.uk/ 上有解決方案。查找“垂直對(duì)齊”。
因?yàn)樗鼈兺?hack 或添加復(fù)雜的 div...我通常使用帶有單個(gè)單元格的表格來(lái)完成它...以使其盡可能簡(jiǎn)單。
除非您需要使其在 Internet Explorer 10 等早期瀏覽器上運(yùn)行,否則您可以使用 Flexbox。它受到當(dāng)前所有主要瀏覽器的廣泛支持。基本上,容器需要指定為彈性容器,并沿其主軸和橫軸居中:
#container { display: flex; justify-content: center; align-items: center; }
為子項(xiàng)指定固定寬度,稱(chēng)為“彈性項(xiàng)目”:
#content { flex: 0 0 120px; }
示例:http://jsfiddle.net/2woqsef1/1/
To shrink-wrap the content, it is even simpler: just remove the flex: ...
line from the flex item, and it is automatically shrink-wrapped.
示例:http://jsfiddle.net/2woqsef1/2/
上述示例已在包括 MS Edge 和 Internet Explorer 11 在內(nèi)的主要瀏覽器上進(jìn)行了測(cè)試。
One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column;
to the flex container. This is how it works between a flex container and its immediate child elements.
There is an alternative method of doing the centering: by not specifying center
for the distribution on the main and cross axis for the flex container, but instead specify margin: auto
on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.
It can be more commonly done with transform
, and it works well even in older browsers such as Internet?Explorer?10 and Internet?Explorer?11. It can support multiple lines of text:
position: relative; top: 50%; transform: translateY(-50%);
示例:https://jsfiddle.net/wb8u02kL/1/
上面的解決方案對(duì)內(nèi)容區(qū)域使用了固定寬度。要使用收縮包裝寬度,請(qǐng)使用
position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%);
示例:https://jsfiddle.net/wb8u02kL/2/
如果需要 Internet Explorer 10 的支持,則 Flexbox 將不起作用,而上面的方法和 line-height
方法將起作用。否則,flexbox 就可以完成這項(xiàng)工作。