この方法の一つ：
垂直整列を使用して：中央集中垂直方向に整列実行、プロセスの条件を満たしている必要があります。
- 親要素の高さの高さに等しい親要素ライン高さ行の高さを設定します
- 子要素の行は、ブロックレベル要素の表示内になければならない：インラインブロック;
- 設定した子要素の垂直整列：ミドル
- この方法は、右開発中の（ない右側）浮動することはできません
以下は、完全なコードで、テスト（緑箱）のためのHTMLファイルを作成することができます。
<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>
<style>
*{
margin:0;
padding:0;
}
.div1{
height:200px;
background:yellow;
/*行高等于容器高度*/
line-height:200px;
}
.div2{
width:100px;
height:100px;
background:green;
/*行内块级元素*/
display:inline-block;
/*中线和父元素基线上方出对其，参考字母"x"*/
vertical-align:middle;
}
.div3{
width:100px;
height:100px;
background:red;
display:inline-block;
}
</style>
<body>
<div class="div1">
xxxxxxxxxxx
<div class="div2" >
</div>
<div class="div3" >
</div>
</div>
</body>
</html>誰もがあなたが乱雑フルスタックエンジニアによるフロントエンドエンジニア、さらには道になるため大量のリソースを共有するために、簡単で効率的かつ無料の学習に役立つために。私たちは、フルスタックの学習Exchangeフロントエンド円をお勧めするためにここにいる：784783012は、交流と共通の進捗状況を学習し、×××議論に流入へようこそ。
学習の本当の始まりは、必然的に開始する場所がわからないだろう場合は、非効率につながる学習を継続する自信に影響を与えます。
しかし、最も重要なことは、私がキーテクノロジーを習得する必要があるかわからないで、頻繁に、ピット学習を強化多くの時間を無駄に終わる、それが効果的か、必要な資源です。
方法2：
この方法は、より多くの暴力、ロケーション・ソリューションを使用することです：
- 親要素は、相対的な位置関係になっています
- サブ要素絶対位置
- 子要素の親要素のトップラインを用いて整列された場合に親要素の最初のサブエレメントの下方への移動を50％、
- 子要素自体が上方に移動され、再び親要素と子要素の中性線を合わせされた場合には「高さ」の半分の高さ、
- この方法は右に配置された右詰め、サブ要素であってもよい。0PX;に
以下は、完全なコードで、テスト（緑箱）のためのHTMLファイルを作成することができます。
<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>
<style>
*{
margin:0;
padding:0;
}
.div1{
height:200px;
background:yellow;
/*相对定位开启*/
position:relative;
}
.div2{
width:100px;
height:100px;
background:green;
/*绝对定位*/
position:absolute;
/*可以右对齐*/
right:0px;
/*先向下移动父元素的50%，此时子元素的顶部与父元素的中线对齐了*/
top:50%;
/*再向上移动自身高度"height"的一半，此时子元素的中线和父元素的中线对齐了*/
margin-top:-50px
}
</style>
<body>
<div class="div1">
<div class="div2" >
</div>
</div>
</body>
</html>