CSSインタビュー質問:センターHTML要素💥)


質問を受ける❓ または

Center a div vertically and horizontally OR How to perfectly center an element in a browser?


どうやって答えるの?🤔 以下に3つの方法があります.私の推薦はずっと下にあります.以下に示すHTMLマークアップを指定します.
<div class="parent">
  <div class="child"></div>
</div>
CSS変換/変換
これは、より良いブラウザを持っているアプローチです🌏 両方のCSSフレックスボックスとグリッドよりサポート.コードは以下のようになります.
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

コデエン:https://codepen.io/angelo_jin/pen/popONyX

Note: All implementation will look like below



CSSフレックスボックス
このソリューションは、CSSのグリッドよりも優れたブラウザをサポートし、これらのブラウザに最適な機能をサポートすることができます.コンテナ内のアイテム間のスペースを配置し、配布するためのより効率的な方法を提供することを目的とする1次元レイアウトを作成するのに最適です.彼らのサイズが未知であるとき、そして、/または、ダイナミックなセンターさえできます.😲
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
コデエン:https://codepen.io/angelo_jin/pen/QWaVGGP

CSSグリッド3
このルールセットは理想的です.なぜなら90年代にはありません.スタイルのいくつかのラインでは、ユーザーインターフェイスをデザインする方法を完全に変更する必要があります.😊 CSSグリッドレイアウトは、ページを主要な領域に分割するか、またはHTMLプリミティブから構築されたコントロールの部分の間で、サイズ、位置、および層の関係を定義するのに優れています.
あなたがあなたのインタビューにこれを使うつもりであるならば、ブラウザーがそれを支えることができるならば、あなたがこの解決策を使うと言及してください.これは、あなたが最新かつ最大のCSS仕様で注意を払っていることを示して、物事をする古い方法で縛られません.
// CSS Grid
.parent {
  display: grid;
  place-items: center;
}
コデエン:https://codepen.io/angelo_jin/pen/qBpMqRr

以下はビデオフォーマットが好きな人向けの媒体です.
Codepenセンター要素収集:https://codepen.io/collection/MgJxRk
(将来の使用のためのブックマークに最適なアイデア)
大きなフロントエンドエンジニアは、CSSとJSに等しく彼の注意を集中させます.この質問に対する私の推薦のために、ブラウザがサポートできるならば、私はCSSグリッドを使用します.そうでないならば、CSS Flexboxにそれに続いてください、CSS翻訳は最後の選択です.