6 CSS の水平および垂直センタリングソリューション-CSSチュートリアル-php.cn

6 CSS の水平および垂直センタリングソリューション

小云云

リリース： 2018-02-23 09:32:00

オリジナル

1952 人が閲覧しました

この記事では、CSSの水平方向と垂直方向の中央揃えの解決策（6種類）に関する関連情報を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

準備

要素を作成

<p class="parent">
  <p class="child">child</p>
</p>

ログイン後にコピー

垂直方向と水平方向のセンタリング解決策 1: 幅がわかっている場合は絶対+マージンの負の値

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  background: yellow;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
}

ログイン後にコピー

垂直方向と水平方向のセンタリング解決策 2: 幅と高さが不明な場合は絶対+変換

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

ログイン後にコピー

垂直中央揃えオプション 3:position+margin:auto

.parent {
  position:relative;
  width:200px;
  height:200px;
  background: red;
}
.child {
  width:80px;
  height:40px;
  background: yellow;
  position: absolute;
  left:0;
  top:0;
  right:0 ;
  bottom:0;
  margin:auto;
}

ログイン後にコピー

垂直中央揃えオプション 4: + 複数行テキストの垂直中央揃え: table-cell+vertical-align:middle;

.parent {
    height: 300px;
    width:400px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
  display: inline-block;
  width:50px;
  height:50px;
  background: blue;
}
/* 或者 */
.parent {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
    text-align: center;
}
.child {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

ログイン後にコピー

垂直中央揃えオプション 5: 表示: flex

.parent {
  width:400px;
  height:200px;
  background:red;
  display: flex;
  justify-content:center;
  align-items:center;
}
.child {
  height:100px;
  width:100px;
  background:green;
}

ログイン後にコピー

垂直方向の中央揃えソリューション 6: 疑似要素

.parent {
  width:200px;
  height:200px;
  background:red;
  text-align: center;
}
.child {
  height:100px;
  width:100px;
  background:yellow;
  display: inline-block;
  vertical-align: middle;
}
.parent:before {
  content:"";
  height:100%;
  vertical-align: middle;
  display: inline-block;
}

ログイン後にコピー