三角形を達成1.css

.one {

幅：0;

高さ：0;

border-top ：200pxの固体赤。

border-bottom ：200pxのソリッドブルー;

国境左：200pxの固体#FFFFFF;

border-right ：200pxの固体#FFFFFF;

}

2. CSS アプリケーションシナリオのレイアウト、3列のレイアウト（左固定、中間オート）

<！DOCTYPE HTML>
<HTML>
<HEAD>
<スタイル>

.outer {
位置：相対;
背景：#DCDCDC; / *灰* /
}
.LEFT {
幅：200pxの、
高さ400ピクセル;
位置：絶対;
左：0 ;
背景：＃FF9900 ;; /オレンジ* /
}
.middle {
高さ：100％;
マージン左：200pxの; / *左側のサブ素子幅* /
マージン右：300ピクセルによって; / *右側のサブ素子幅* /
背景：＃fff700; /イエロー* /
}
.RIGHT {
幅：300ピクセルによって;
高さ：300ピクセルによって;
位置：絶対;
右：0;
背景：＃1 93ec7c; /グリーン* /
}
</スタイル>
</ HEAD>
<BODY>
<DIV CLASS = "外側">
<DIV CLASS = "内側左">左</ DIV>
<DIV CLASS = "内側右">権利</ DIV>
<DIV CLASS = "内側ミドル「>ミドル</ div>
</ div>
</ BODY>
</ HTML>

詳しい情報

参考：https://blog.csdn.net/u012194956/article/details/79090629

3.垂直センタリング

（1）テキストの単一の行は、垂直中心

#child { 
行の高さ：200pxの。
}

（2）複数行のテキストは、垂直中心

親ディスプレイを使用して、要素：表とサブ素子ディスプレイを用いた：表セルプロパティアナログ形式、垂直整列配置されたサブ要素：垂直方向の中央に中央

HTML：

<div class="span_box bg_box">
<span class="words_span">
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
</span>
</div>

css：
.bg_box {
   width: 300px;
   height: 300px;
   margin-top: 20px;
   background-color: #BBBBBB;
}

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

（3）图片垂直居中

#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

（4）基于绝对定位的pc端实现

.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

（5）其他

代码：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

低版本 IE fix bug：

1
2
3

#child {
display: inline-block;
}

块级元素

css

#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

总结：关于垂直居中，有很多大佬都总结了好多，我看了也没记住，所以我选了自己用到的几个～～

フロントエンドタイトル寄せ集め

三角形を達成1.css

2. CSS アプリケーションシナリオのレイアウト、3列のレイアウト（左固定、中間オート）

3.垂直センタリング

おすすめ