CSSが中央に位置する各種の方案

3236 ワード

CSSが中央に位置する各種の方案

中央を実現する様式は容器(container)の様式と中央を必要とする要素(item)の様式に分けられる.

コンテナは、デフォルトではブロックレベルの要素を指します.

各案ともメリットとデメリットがあり、実際のニーズに応じて選択する.互換性を考慮しなければ、優先選択用flex実装.

水平方向中央

行内または行内ブロック要素

.container {
  text-align: center;
}

単一ブロック級元素

.item {
  margin: 0 auto;
}

複数のブロックレベル要素

inline-block案

.container {
  text-align: center;
}

.item {
  display: inline-block;
}

flex案

.container {
  display: flex;
  justify-content: center;
}

垂直方向中央揃え

行内または行内ブロック要素

一方通行

容器高さは元素で開く

.container {
  padding: 50px 0;
}

容器高さ固定かつ既知

.container {
  height: 100px;
  line-height: 100px;
}

複数行(複数行のコンテンツを1つの要素にまとめる)

table案

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

flexシナリオ(複数行の内容がテキストの場合、1つの要素に包まなくてもよい)

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

疑似元素案

エレメントの幅は容器の幅より小さくなければならない.そうしないと、容器の下に押し込まれる.

空の偽要素でも、その後ろの行の要素やテキストとの間に隙間があるからです.

この空隙の大きさはフォントサイズに関係し、フォントサイズが0に等しいと空隙が消える.

これにより、後面元素が容器内で占有できる幅が小さくなり、元素幅が容器幅に等しいと押し下げられる.

解決策としては、容器のfont-sizeを0に設定し、要素にfont-sizeを必要な値に設定する.

.container {
  font-size: 0;
}

.container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.item {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}

単一ブロックレベル要素

絶対位置決め方式

元素高さ既知

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

元素高さ不明

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

flex案

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平方向と垂直方向を同時に中央に配置

絶対位置決め案

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
}

.container {
  position: relative;
}

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

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  margin: auto;
}

flexプラン

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
}

.item {
  margin: auto;
}

grid案

.container {
  display: grid;
}

.item {
  margin: auto;
}

asp.NetSqlParameter条件に応じてパラメータを追加する方法

[微信小プログラム]シミュレーションページをめくり、画像のみをサポート