次のように：
<body>
<div class="outer">
<p>盒子</p>
</div>
</body>
方法 1 : 絶対位置とマージン値を使用して、div モジュールの水平方向と垂直方向のセンタリングを実現します
<style>
/* 去掉内外边距 */
*{
padding: 0;
margin: 0;
}
body{
background-color: #e84118;
}
/* 用法1 :使用绝对定位和margin值实现div模块的水平和垂直居中*/
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
/* 这是行内元素水平居中 */
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px -100px;
/* margin-left:-100px;
margin-top:-100px */
}
</style>
実験結果は次のとおりです:
方法 2 : 絶対位置決めを使用し、上: 50%; 左: 50%; 変換:translate(-50%,-50%); メソッドを使用します。transform:translate(-50%,-50%); は、マージンを使用して、方法 1 と同じ長さと幅の 50% だけ左上に移動することを意味します。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
/* 这是行内元素水平居中 */
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%);的意思是，往左，上移动自身长宽的50% */
transform: translate(-50%,-50%);
}
方法 3 : 絶対配置を使用し、マージン: 自動で、上、左、右、下の値が等しいため、実現するには値が等しい必要があります。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
line-height: 200px;
/* 上面的元素不做改变 */
position: absolute;
margin: auto;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
方法 4 : 絶対位置決めと演算を使用します。方法 1 と同様です。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
line-height: 200px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);/*calc，获取父级元素的50%，然后减去自身的一般px值，就可以实现*/
left: calc(50% - 100px);
}
方法 5 : 子要素を inline 要素に変換し、親要素で line-hight: 独自の高さを使用して垂直方向のセンタリングを実現し、親要素で text-align: center; を使用して水平方向のセンタリングを実現します。
<body>
<div class="outer">
<div class="inner">
<p>盒子</p>
</div>
</div>
</body>
<style>
/* 去掉内外边距 */
*{
padding: 0;
margin: 0;
}
body{
background-color: #e84118;
}
/* 用法1 :使用绝对定位和margin值实现div模块的水平和垂直居中*/
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
text-align: center;
line-height: 200px;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
display: inline-block;
}
</style>
結果は次のとおりです。
方法 6 : この方法は一般的には使用されませんが、vertical-align についての理解が深まります。
vertical-align は、インライン要素に基づいてセンタリングまたはトップレベルの操作を実行します。W3C: このプロパティは、インライン要素のベースラインの、要素が存在する行のベースラインに対する垂直方向の配置を定義します。
<body>
<div class="outer">
<div class="inner">
234234
<!-- <p>盒子</p> -->
</div>
<div class="help"></div>
</div>
</body>
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
text-align: center;
/* line-height: 200px; */
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
/*由于高度100%将会将原有行的高度撑开，使得行的高度发生改变，进而inner使用vertical-align:middle;的时候生效了。*/
.help{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
方法 7 : フレックスレイアウト! より便利になり、よく使われます。
フレックス レイアウト、推奨: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display: flex;
justify-content: center;
align-items: center; この 3 行のコードを親要素に記述するだけです。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: flex;
justify-content: center;
align-items: center;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
}
次のようにすることもできます: フレックス項目で margin: 0 auto; および align-self: center; を使用してレイアウトを実現します。
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: flex;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
margin: 0 auto;
align-self: center;
}
方法 8 : グリッド レイアウトを使用します。これも比較的単純です。
グリッド レイアウトの属性は 2 つのカテゴリに分けられ、1 つはコンテナ上で定義され、コンテナ属性と呼ばれ、もう 1 つはアイテム上で定義され、アイテム属性と呼ばれます。このセクションでは、最初にコンテナーのプロパティを紹介します。
グリッド レイアウト、推奨: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: grid;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
align-self: center;/*垂直*/
justify-self: center;/*水平*/
}
話は安い、コードを見せて! ——Xinhuo Studio