CSS「position:absolute」で中央配置

「position:absolute」で左右天地中央、左右中央、天地中央配置

作成日:2017-12-13, 更新日:2023-01-24

top,leftなどで調整

幅なり高さを指定する必要あり。

基本

親 {
  position: relative;
  
  /** ▼サイズは好きなサイズ **/
  width: 100%;
  height: 100px;
}

子 {
  position: absolute;
  margin: auto;
  
  /** ▼天地中央なら必要 **/
  top: 0;
  bottom: 0;
  
  /** ▼左右中央なら必要 **/
  left: 0;
  right: 0;
  
  /** ▼サイズは好きなサイズ：記述しないと何かと面倒 **/
  width: 2.5em;  /** 左右中央なら必須 **/
  height :1em;  /** 天地中央なら必須 **/
}

左右天地中央

中央
<div style="position:relative;width:100%;height:100px;">
  <div style="position:absolute;margin:auto;width:2.5em;height:1em;top:0;bottom:0;left:0;right:0;">中央</div>
</div>

左右中央

中央
<div style="position:relative;width:100%;height:100px;">
  <div style="position:absolute;margin:auto;width:2.5em;left:0;right:0;">中央</div>
</div>

天地中央

中央
<div style="position:relative;width:100%;height:100px;">
  <div style="position:absolute;margin:auto;height:1em;top:0;bottom:0;">中央</div>
</div>

右側で天地中央：「right:0;」付き

中央
<div style="position:relative;width:100%;height:100px;">
  <div style="position:absolute;margin:auto;height:1em;top:0;bottom:0;right:0;">中央</div>
</div>

transform:translateで調整

未調査。下記みたいな感じでいけるそうだ。

子 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  
  width:〇〇〇;
  height:〇〇〇;
}

関連項目