CSS垂直中央の7つの方法

私たちは1つのレイアウトを編集して、通常は水平の中央と垂直の中央を使って設計して、水平の中央はとても処理して、margin:0 autoを設定することにほかならない.またはtext-align:center;水平中心の問題は簡単に解決できますが、これまで最も面倒な位置合わせの問題は、「垂直中心」という嫌な設定でしたが、以下ではCSSを単純に垂直中心にする7つの方法を紹介します.

7つの垂直中心の方法

設定行高(line-height)

擬似要素

を追加

calc動的計算

表または仮装表

を使用する.

transform

絶対位置決め

Flexbox

を使用

行の高さを設定(line-height)

行の高さを設定するのは垂直に中央に位置する最も簡単な方法で、「単行」の「行内要素」(inline、inline-block)に適用されます.例えば、単行のタイトルや、すでにinline-block属性に設定されているdivなどです.line-heightを高さと同じ数値に設定すると、内容の行内要素は垂直に中央に位置し、行の高さなので、行内要素の上下に上りの高さの1/2が加算されるので、垂直に位置します.しかし、これにより、なぜ単行の行内要素が必要なのかがわかります.複数行であれば、2行目と1行目の間隔が大きくなり、私たちが望んでいる効果ではありません.CSS例:

.div0{
  width:200px;
  height:150px;
  border:1px solid #000;
  line-height:150px;
  text-align:center;
}
.redbox{
  display:inline-block;
  width:30px;
  height:30px;
  background:#c00;
}

擬似要素の追加(::before、::after)

最初の方法は、最も簡単な方法(単行タイトルに適用)ですが、単行しかないので、複数行の要素を垂直に中央に置くには、偽の要素を使用する必要があります.その前に、CSSのvertical-alignという属性を説明します.この属性は垂直に中央に位置していますが、要素内のすべての要素の垂直位置が互いに中央に位置し、外枠の高さに対して垂直に中央に位置していません.(次のCSSはこのような形の垂直中央になります)

.div0{
  width:200px;
  height:150px;
  border:1px solid #000;
  text-align:center;
}
.redbox{
  width:30px;
  height:30px;
  background:#c00;
  display:inline-block;
  vertical-align:middle;
}
.greenbox{
  width:30px;
  height:60px;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}
.bluebox{
  width:30px;
  height:40px;
  background:#00f;
  display:inline-block;
  vertical-align:middle;
}

したがって、1つのブロックが高さ100%になると、他のブロックは本当に垂直に中央に位置します.

.greenbox{
  width:30px;
  height:100%;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}

しかし、私たちはいつも垂直に中央に位置するたびに、奇妙なdivを追加することはできません.だから私たちは頭を「偽要素」に動かして、beforeと::afterを利用してdivを鉄棒の中に追加して、この「偽」divの高さ100%を譲って、簡単に他のdivを中に置くことができます.でもでもでも!divはdisplayをinline-blockに設定することを覚えています.結局vertical-align:middleです.行内要素に対してdiv自体がblockなので変更しなければなりません!

.div0::before{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background:#f00;
}

calc動的計算

ここを見ると疑問に思うかもしれませんが、もし今日私のdivがblockでなければならないなら、私はどのように垂直に中央に置くべきですか?この場合、CSS特有のcalcダイナミックコンピューティングの能力を使用する必要があります.私たちは中央にあるdivのtop属性を、上からの距離が「50%の外枠高さ-50%のdiv高さ」であれば、垂直に中央にすることができます.なぜmargin-topを使わないのか、marginが水平幅に合っているので、topを使わなければ正確ではありません.

.div0{
  width:200px;
  height:150px;
  border:1px solid #000;
}
.redbox{
  position:relative;
  width:30px;
  height:30px;
  background:#c00;
  float:left;
  top:calc(50% - 15px);
  margin-left:calc(50% - 45px);
}
.greenbox{
  position:relative;
  width:30px;
  height:80px;
  background:#0c0;
  float:left;
  top:calc(50% - 40px);
}
.bluebox{
  position:relative;
  width:30px;
  height:40px;
  background:#00f;
  float:left;
  top:calc(50% - 20px);
}

表または仮装表の使用

表というHTMLでよく使われるDOMでは、垂直中心を実現するのはかなり簡単で、次の行vertical-align:middleだけでいいことに気づく人もいるかもしれませんが、なぜでしょうか.最も主要な原因はtableのdisplayがtableであり、tdのdisplayがtable-cellであるため、表を直接使用するほか、垂直に中央に位置する要素の親要素のdisplayをtable-cellに変更することで簡単に達成できるが、displayを変更すると他のスタイル属性の連動の影響を及ぼす場合があり、注意して使用する必要がある.HTML:

<table>
    <tr>
        <td>
            <div>      div>
        td>
    tr>
table>
<div class="like-table">
    <div>        div>
div>

CSS:

.like-table{
    display:table-cell;
}
td,
.like-table{
    width:150px;
    height:100px;
    border:1px solid #000;
    vertical-align: middle;
}
td div,
.like-table div{
    width:100px;
    height:50px;
    margin:0 auto;
    color:#fff;
    font-size:12px;
    line-height: 50px;
    text-align: center;
    background:#c00;
}
.like-table div{
    background:#069;
}

transform

transformはCSS 3の新しい属性で、主に要素の変形、回転、変位を管理し、transformの奥のtranslateY(垂直の変位を変えるには、パーセンテージ単位で使用すると要素自体の長さと幅を基準にします)を利用して、要素自体のtop属性を組み合わせることで、垂直に中央に位置する効果を出すことができます.比較的注意しなければならないのは、サブ要素にposition:relativeを付けなければなりません.そうしないと効果がありませんよ.

.use-transform{
    width:200px;
    height:200px;
    border:1px solid #000;
}
.use-transform div{
    position: relative;
    width:100px;
    height:50px;
    top:50%;
    transform:translateY(-50%);
    background:#095;
}

ぜったいいち

絶対的な位置付けはCSSの中のposition:absoluteで、絶対的な位置を利用して指定しますが、垂直中心のやり方は私たちの正統な絶対的な位置とは異なり、上下左右の数値を0に設定し、margin:autoを1つ組み合わせることで垂直中心にすることができますが、特に注意しなければならないのは、絶対的な位置付けの子要素を設定し、その親要素のpositionをrelativeに指定しなければなりませんよ!また、絶対的に位置する要素は互いに上書きされるので、コンテンツ要素が多い場合は問題がある可能性があります.

.use-absolute{
    position: relative;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-absolute div{
    position: absolute;
    width:100px;
    height:50px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#f60;
}

Flexboxの使用

align-itemsまたはalign-contentのプロパティを使用すると、軽くて簡単に垂直に中央に位置する効果が得られます.

.use-flexbox{
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-flexbox div{
    width:100px;
    height:50px;
    background:#099;
}

以上が垂直中央の方法です.垂直中央はdisplayという属性を修正するために使用されることが多いため、レイアウトにも影響を与えることが多いです.例えば、flexboxを使うべきではない場所でflexboxを使うと、tableを使うべきではない場所でtableを使うべきで、inline-blockを使うべきではありません.その後、他の位置決めスタイルをたくさん書いて修正すると、少し本末転倒します.そのため、これらCSSを垂直に中心に置く方法をどのように活用するかは、皆さんのレイアウト次第です.
転載先:https://juejin.im/post/5cd111b0f265da03a00fe5d2