CSS を使用してテキストを垂直方向に中央揃えにするには、特定のプロパティを組み合わせてコンテナ内で完全に位置合わせします。これは、さまざまな画面サイズや解像度にわたって視覚的なバランスと読みやすさを維持するのに役立ちます。
CSS を使用してテキストを垂直方向に中央揃えにする方法は次のとおりです。
目次
使用する display: table-cell>
display: table-cell; を使用してテキストを垂直方向に中央揃えにするには垂直配置: 中央;コンテナ要素上で、コンテンツのサイズや画面の寸法に関係なく、正確な位置合わせが保証されます。コンテナーはビューポートの高さ (100vh) と幅 (100vw) 全体に広がり、破線の境界線とベージュ色の背景が付いています。
辞書C#
例： 以下の例は、CSS を使用してテキストを垂直方向に中央揃えすることを示しています。display: table-cell>。
分数として .06HTML
水平方向と垂直方向の配置title><style>.container { 高さ: 100vh; 幅: 100vw; 表示: テーブルセル; 垂直配置: 中央; 境界線: 2 ピクセルの破線 #4b2869; 背景色: ベージュ; スタイル>頭> <body> <div>表示付きのテキストを垂直方向に中央揃え: table-cell プロパティ div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css.webp' alt="マウンテンバイク"><p>出力</p> <h2 id='using-lineheight-and-verticalalign'> <b> <strong>使用する</strong> </b> <b><code class='hljs'> line-height></code></b> <b> <strong>そして</strong> </b> <b><code class='hljs'> vertical-align></code></b> </h2><p dir='ltr'><span>垂直方向の中央に配置するには</span> <b><code class='hljs'> the></code></b> <span>line-height: 200px; を使用した div 要素内のテキスト高さを一致させながら、vertical-align: middle;ネストされたスパンでは、フォント サイズに関係なく正確な位置合わせが保証されます。 text-align: center;プロパティはテキストを水平方向に中央に配置し、破線の境界線で視覚的に区別します。</span> <b> <strong>例：</strong> </b> <span>この例では、CSS を使用してテキストを垂直方向に中央揃えにしています。</span><code class='hljs'>line-height></code><span>そして</span><code class='hljs'>vertical-align.></code></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>タイトルの水平方向と垂直方向の配置><style>div { 高さ: 200px; 行の高さ: 200px; テキスト整列: 中央; 境界線: 2 ピクセルの破線 #f69c55; スパン { 表示: インラインブロック; 垂直配置: 中央; 行の高さ: 通常; スタイル>頭> <body> <div> <span>techcodeview.comspan> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-2.webp' alt="line-height とvertical-align を使用して垂直方向に中央揃えにする"><h2 id='using-flexbox-method'><span>フレックスボックスメソッドの使用</span></h2><p dir='ltr'><span>縦に揃えるには</span><code class='hljs'>a></code> <b><code class='hljs'>></code></b> <span>Flexbox メソッドを使用してテキストを表示するには、display: flex; を設定します。整列項目: 中央;ボディ要素上で、画面サイズに関係なく完璧なセンタリングを保証します。テキストは 20px の font-size: でスタイル設定されます。フォントの太さ: 太字;読みやすさのために。</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-sort-an-array-java">ソートされたJava配列</a>
</blockquote> <p dir='ltr'> <b> <strong>例：</strong> </b> <span>以下の例は、CSS を使用してテキストを垂直方向に中央揃えすることを示しています。</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>垂直中央テキスト - フレックスボックスメソッドtitle><style>ボディ { 表示: フレックス; 整列項目: 中央; 高さ: 100vh; マージン: 0; 背景色: rgb(181, 226, 211); .text {フォントサイズ: 20px; フォントの太さ: 太字; スタイル>頭> <body> <div>Flexbox メソッドを使用したテキストの垂直方向の配置 div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-3.webp' alt="垂直整列フレックス"><p>出力</p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">カテゴリ</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/node-js-tutorial/">Node.js チュートリアル</a> </li><li> <a href="/dbms-indexing/">Dbms インデックス作成</a> </li><li> <a href="/mensuration-3d/">3D測定</a> </li><li> <a href="/amendment/">修正</a> </li><li> <a href="/javascript-array/">Javascript配列</a> </li><li> <a href="/node-js-misc/">Node.js-その他</a> </li><li> <a href="/physics/">物理</a> </li><li> <a href="/java-i-o/">Java I/O</a> </li><li> <a href="/random-algorithms/">ランダムアルゴリズム</a> </li><li> <a href="/javascript-es/">Javascript-Es</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">C++ リスト関数</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> C++ リスト関数</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/c-list-function/"> <i class="fa fa-external-link"></i> 続きを読みます</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">興味深い記事</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/manual-testing">手動テスト</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/4-things-parents-need-know-about-pok-mon-go-242102">Pokémon GO について親が知っておくべき 4 つのこと</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explainer-what-is-yik-yak-24244">説明者: Yik Yak とは何ですか?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-sort-dictionary">パイソン |辞書を並べ替える</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-examples/">Javaの例</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">人気の投稿</h2>
<div class="content">
<ul class="list"> <li><a href="/how-insert-watermark-word">Wordの透かし</a>
</li><li><a href="/govinda">ゴビンダ俳優</a>
</li><li><a href="/java-hashset">ハッシュセットJavaとは何ですか</a>
</li><li><a href="/sed-command-linux-unix-with-examples">sedコマンド</a>
</li><li><a href="/css-bold-text">CSS太字</a>
</li><li><a href="/uppercase-shortcut-excel">すべて大文字のショートカット Excel</a>
</li><li><a href="/java-if-else-statement">Javaのif else文</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 全著作権所有 | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">免責事項</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">私たちについて</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">プライバシーポリシー</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>