単一行テキスト+複数行テキストの垂直方向および水平方向の中央揃え方法

1つは、1行のテキストの中央揃え方法です。

  レンダリングは次のとおりです

  。HTMLコード

<div id="container">
    <div id="text">垂直水平居中的文本</div>
</div>

  cssスタイル

#container {
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
}
#text{
    
    
    text-align: center;
    line-height: 300px;
}

  注：子要素の行の高さ=親要素の高さ。

2行のテキストの中央揃え方法

  レンダリングは次のとおりです。

  HTMLコード

<div id="container">
    <div id="text">多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法</div>
</div>

  方法1：display: table属性を使用する

#container{
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
    
    display: table;
}
#text{
    
    
    display: table-cell; 
    vertical-align:middle;
    text-align: center;
}

  方法2：親要素と子要素で異なる設定line-height

#container{
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
    line-height: 300px;
}
#text{
    
    
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}

  注：親要素のline-height=親要素の高さでheightあり、子要素のline-heightは実際の状況に応じて適切な値に設定する必要があります。

第三に、複数行のテキストのセンタリングに基づくliラベルのセンタリング方法

  レンダリングは次のとおりです。

  HTMLコード

<div id="container">
    <ul>
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>

  方法1：親要素と子要素で異なる設定line-height

#container{
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
    
    line-height: 300px;
    text-align: center;
}
ul{
    
    
    line-height: 22px;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

  方法1：display: table属性を使用する

#container {
    
    
    width: 600px;
	height: 300px;
	border: 1px solid black;
    display: table;
}
ul {
    
    
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

  上記はテキストの設定のみです。テキストを囲むボックスの中心を設定することでテキストを中央に配置することもできます。ボックスのいくつかの中央揃え方法については、以前のブログを参照してください。
  ボックスブログリンクを中央に配置するいくつかの方法：https：//blog.csdn.net/qq_43692768/article/details/109412059