center

センター（値）

意味要素を中央に配置

centerとは？

'center'は、要素を左右の中央に配置するために使用する値です。テキストや画像などのインライン要素やインラインブロック要素を中央揃えにする際によく使われます。

centerの具体的な使い方

text-align: centerを使用する例

<style>
    .centered {
        text-align: center;
        background-color: lightblue;
        padding: 10px;
    }
</style>

<div class='centered'>
    中央揃えのテキスト
</div>

親要素内のテキストやインライン要素を中央に揃えます。

marginを使用して要素を中央に配置する例

<style>
    .center-block {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
</style>

<img src='image.jpg' class='center-block' alt='中央配置の画像'>

ブロックレベル要素を水平方向の中央に配置します。

centerに関するよくある質問

Q. text-align: centerとmargin: autoの違いは？

A. text-align: centerはインライン要素やテキストを中央揃えにします。margin: auto（左右）はブロックレベル要素を水平方向の中央に配置します。

Q. 垂直方向の中央揃えはできる？

A. CSSのcenterだけでは垂直方向の中央揃えはできません。flexboxやgridレイアウト、または絶対位置指定と変形を使用して実現できます。

CSSのcenterについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのcenterやtransparent、pt/pc、ease-in-out、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。