0
現在のところ、段落を垂直方向にセンタリングする方法は2つあります。 FirefoxとInternet ExplorerでCSS3の垂直方向のセンタリング方法
footer {
\t height: 10em;
\t position: absolute; left: 0; right: 0;
\t color: white; background-color: #333;
}
footer > p {
\t background-color: lightBlue;
}
footer.vcenter1 { bottom: 11em; transform-style: preserve-3d; }
footer.vcenter2 { bottom: 0; }
.vcenter1 > p {
\t margin: 0;
\t position: absolute;
\t top: 50%; transform: translateY(-50%);
}
.vcenter2 { white-space: nowrap; word-spacing:-.25em; }
.vcenter2:before, .vcenter2 > p { display: inline-block; vertical-align: middle; }
.vcenter2:before { content:""; height: 100%; }
.vcenter2 > p { white-space: normal; word-spacing: normal; }<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge" />
\t <title>Test</title>
\t <link href="Test.css" rel="stylesheet" />
</head>
<body>
<footer class="vcenter1">
\t <p>
\t \t test text
\t \t some text more text and more text... and more text... and more text... and more text... and more text... and more text... and more text...
\t \t <br>line3
\t </p>
</footer>
<footer class="vcenter2">
\t <p>
\t \t test text
\t \t some text more text and more text... and more text... and more text... and more text... and more text... and more text... and more text...
\t \t <br>line3
\t </p>
</footer>
</body>
</html>両方まったく同じように動作しているようです。しかし、これらの2つの方法のいずれかに、他のブラウザで問題を引き起こす可能性のあるものはありますか？
明らかに、vcenter1のメソッド（transform：translateY）はCSSコードは少ないですが、静的な配置のために実行時にオブジェクトを移動するために本質的に設計されたものは決して快適ではありませんでした。
可能な複製を使用することができますすべてのモダンブラウザで完璧に動作vcenter1（位置を使用して変換中心）知っているように[どのように垂直方向にすべてのブラウザのためのdivの中心？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） - はるかにthaがあります上記の2つの方法。 – Turnip