CSSを使用して中央揃えにする方法が知りたい
文字や画像の配置も整えたい
どのようなコードを使えばいいかわからない
要素を縦方向（水平方向）に中央揃えにすることは、ページ全体のバランスを整え、プロフェッショナルな印象を与えます。
この記事では、CSSを使って縦中央揃えを行うさまざまな方法を初心者にもわかりやすく解説します。
- CSSの勉強には「侍テラコヤ」がおすすめ
- CSSを使った縦中央揃えの方法
- CSSを使った配置の整え方
当ブログがオススメする
CSS学習におすすめの
無料プログラミングサイト3選
| 1位：侍テラコヤ | 2位：Progate | 3位：ドットインストール | |
|---|---|---|---|
| サイト名 |  |  |  |
| 学べる内容 | HTML/CSS、JavaScript、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、Webデザインなど | HTML/CSS、JavaScript、PHP、Ruby、Python、Java、Go、Git、SQL など | Java、HTML/CSS、JavaScript、Ruby、Python、C言語 など |
| 質問 相談サポート | |||
| 練習問題の数 | |||
| 特徴 | 現役エンジニアとのマンツーマンレッスン 回答率100%のQ&A掲示板が使い放題 実践的なスキルを身につけられる課題機能 | 環境構築をしなくても学べる イラスト付きのスライド式教材 スマホアプリでも学べて手軽 | レッスン動画でインプット可能 3分の簡単な動画で手軽に学べる 有料プランなら質問ができる |
| 詳細 | 公式サイト | 公式サイト | 公式サイト |
CSSで文字や画像を縦中央揃えにする方法
ウェブデザインの世界では、要素の配置がページの見た目と使いやすさに大きく影響します。
中でも、文字や画像などのコンテンツを縦方向に中央揃えにする技術は、デザインの美学と機能性を高める重要な要素です。
この技術を駆使することで、コンテンツの視認性を向上させ、ユーザーにとって魅力的で直感的なインターフェースを提供することが可能になります。
これにより、ウェブページのデザインの質を向上させることができるでしょう。
縦（水平方向）に中央揃えする方法【サンプルコード有】
縦（水平方向）に中央揃えする方法について解説していきます。
具体的には以下の方法を使用します。
- line-height
- vertical-align
- inline-block
- padding
- position
- flex
それぞれ解説していきますので、参考にしてください。
line-height
line-height は行の高さを制御するCSSプロパティです。
これを使うと、テキストをその親要素の高さに対して縦中央揃えできます。
親要素の高さと同じ値をline-heightに設定すると、テキストは縦方向の中央に位置します。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
vertical-align
vertical-align は、行内要素やテーブルセル要素の垂直方向の配置を制御します。
vertical-align: middle; は、要素を親要素の中央に配置するためによく使用されます。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
inline-block
display: inline-block; を使用すると、要素は行内ブロック要素として振る舞います。
これと vertical-align: middle; を組み合わせることで、隣接する要素間で縦方向の中央揃えを実現できます。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
padding
上下の padding を等しく設定することで、コンテナ内のコンテンツを縦中央に配置できます。
これは、コンテナの内部に余白を追加する方法です。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
position
position: absolute; と transform: translateY(-50%); を組み合わせると、要素を正確に縦中央に配置できます。
これは、要素をビューポートに対して相対的に配置する際に特に有効です。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
flex
Flexboxを使うと、コンテナ内のアイテムを簡単に縦中央揃えにできます。
display: flex; と align-items: center; を設定することで、子要素は親コンテナ内で垂直方向に中央揃えになります。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
左右の中央揃えする方法【サンプルコード有】
ここからは、左右の中央揃えする方法について解説していきます。
具体的な方法は以下のとおりです。
- text-align: center
- margin: 0 auto
- display: inline-block
それぞれ解説していきますので、参考にしてください。
text-align: center
text-align: center; は、テキストやインライン要素を水平方向に中央揃えにするために使用されます。
これはテキストコンテンツやインライン要素に対して効果的です。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
margin: 0 auto
ブロックレベルの要素を水平方向に中央揃えにする場合、margin: 0 auto; を使用します。
これにより、左右のマージンが自動的に等しくなり、要素が中央に配置されます。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
display: inline-block
要素に display: inline-block; を設定し、親要素に text-align: center; を設定することで、要素を水平方向に中央揃えにできます。
See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.
まとめ
ウェブデザインにおいて、コンテンツの適切な配置はページの見た目とユーザーエクスペリエンスに大きな影響を与えます。
本記事では、CSSを使用して要素を縦中央揃えおよび左右中央揃えにするさまざまな方法を詳しく解説しました。
縦中央揃えにはline-height、vertical-align、inline-block、padding、position、flexなどのプロパティが有効で、左右中央揃えにはtext-align: center、margin: 0 auto、display: inline-blockなどが効果的です。
これらのテクニックを適切に使い分けることで、どんなウェブページもよりプロフェッショナルで洗練された見た目に仕上げられます。
