親エレメントの中で子エレメントを水平に垂直に中央に配置する6つの方法

ここでは、子要素を親要素の中で水平に垂直に中央に配置し、その長所と短所を分析する6つの方法を紹介します.

目次

位置決め:3種類の

display: flex

JavaScript

display: table-cell

まず、ページ構造とデフォルトの背景色を指定します.(ブラウザでの表示結果は水平垂直に中央にあるため、実行図は添付されません.)
ベースHTML

<div class="parent">
    <div class="child">childdiv>
div>

ベースCSS

* {
     
    margin: 0;
    padding: 0;
}

.parent {
     
	background-color: pink;
}

.child {
     
    background-color: lightseagreen;
}

位置決め実装1

CSS

.parent {
     
    position: relative;
    width: 200px;
    height: 200px;
}

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

メリットとデメリット:

の欠点:.child要素のアスペクト値を知らなければならず、固定されたアスペクト値を持たなければならない.

位置決め実装2

CSS

.parent {
     
    position: relative;
    width: 200px;
    height: 200px;
}

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

メリットとデメリット:

の利点:.childのアスペクト値を知る必要がなく、同時にそのアスペクト値を設定する必要がなく、コンテンツによって自動的に開くことができる.

の欠点:互換性の問題.

位置決め実装3

CSS

.parent {
     
    position: relative;
    width: 200px;
    height: 200px;
}

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

メリットとデメリット:

の利点:.childの幅を知る必要はありません.

の欠点:固定されたアスペクト値が必要です.そうしないと、アスペクト値がない方向に親要素全体にわたって押し出されます.

display:flex実装

CSS

.parent {
     
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

メリットとデメリット:

の利点:.childのアスペクト値を知る必要がなく、同時にそのアスペクト値を設定する必要がなく、コンテンツによって自動的に開くことができる.

の欠点:互換性の問題.

JavaScript実装

まず、観察を容易にするためにCSSを省略するために、選択的に元素を添加することができる.
CSS

.parent {
     
    width: 200px;
    height: 200px;
}

JavaScript

window.onload = function() {
     
    let parent = document.querySelector(".parent"),
        child = document.querySelector(".child");
    
    parent.style.position = "relative";
    child.style.position = "absolute";
    child.style.left = (parent.offsetWidth - child.offsetWidth) / 2 + 'px';
    child.style.top = (parent.offsetHeight - child.offsetHeight) / 2 + 'px';
    console.log(child.offsetHeight);
}

メリットとデメリット:

の利点:DOMを直接操作して幅の高さを得るので、幅の高さを設定する必要はありません.

欠点:CSSを直接使用していないと性能が良い.

display:table-cell実装

.parent {
     
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child {
     
    display: inline-block;
}

利点と欠点:この方法はあまり使用されず、.parent要素のアスペクト値はパーセントに設定できない.

まとめ

開発では,実際には互換性の問題をあまり考慮する必要がないので,display: flexの方式を使うと簡潔で実用的だと個人的に感じている.
フレキシブルボックスのレイアウトがまだ理解されていない場合は、ここにチェン一峰のflex を追加するか、リンク:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlにアクセスできます.