align-items: centerを指定すると小数点以下はどうなるか

FlexboxとGrid Layoutで align-items: center を指定したときの表示を確認した。16pxのブロックに1pxの線を垂直中央配置したとき、どうなるか。IE11とEdgeはVirtualBoxを使った仮想環境で確認した。

結論、使うプロパティとブラウザによって結果が異なった。Flexboxを使うと小数点まで考慮されずに配置が決定されたが、上下にとる数値はブラウザによって違った。Grid Layoutを使うとSafariとFirefoxでは小数点まで考慮されたものの、Chromeでは考慮されなかった（IE11とEdgeは確認できなかった）。

望ましいのは小数点まで考慮して配置が決定されることだと思う。

Flexbox

• Flexboxで16pxのブロックに1pxの線を垂直中央配置 | JSFiddle
• 結果
  • Chrome、Firefox、Safari ... 上から8px・下から7pxの位置に線が表示された
  • Edge、IE11 ... 上から7px・下から8pxの位置に線画表示された

ちなみに border-top の代わりに height を使っても結果は同じ。

Grid Layout

• Grid Layoutで16pxのブロックに1pxの線を垂直中央配置 | JSFiddle
• 結果
  • Safari、Firefox ... 上下7.5pxの位置に線が表示された
  • Chrome ... 上から8px・下から7pxの位置に表示された
  • Edge、IE11 ... どうも align-items: center がうまく適用されず、結果を確認できなかった

余談

grid-template-columns の代わりは -ms-grid-columns 。最後に「s」いるで。

• https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673533(v=vs.85)

余談2

• top: calc(100% / 2)で16pxのブロックに1pxの線を垂直中央配置 | JSFiddle
• transform: translateY(50%)で16pxのブロックに1pxの線を垂直中央配置
• 結果：すべての主要ブラウザで上から8px、下から7pxの位置に線が表示された

結果は予想通り。このままでいいと思う。