align-items: centerを指定すると小数点以下はどうなるか
FlexboxとGrid Layoutで align-items: center
を指定したときの表示を確認した。16pxのブロックに1pxの線を垂直中央配置したとき、どうなるか。IE11とEdgeはVirtualBoxを使った仮想環境で確認した。
結論、使うプロパティとブラウザによって結果が異なった。Flexboxを使うと小数点まで考慮されずに配置が決定されたが、上下にとる数値はブラウザによって違った。Grid Layoutを使うとSafariとFirefoxでは小数点まで考慮されたものの、Chromeでは考慮されなかった(IE11とEdgeは確認できなかった)。
望ましいのは小数点まで考慮して配置が決定されることだと思う。
Flexbox
ちなみに border-top
の代わりに height
を使っても結果は同じ。
Grid Layout
余談
grid-template-columns
の代わりは -ms-grid-columns
。最後に「s」いるで。
余談2
- top: calc(100% / 2)で16pxのブロックに1pxの線を垂直中央配置 | JSFiddle
- transform: translateY(50%)で16pxのブロックに1pxの線を垂直中央配置
- 結果:すべての主要ブラウザで上から8px、下から7pxの位置に線が表示された
結果は予想通り。このままでいいと思う。