上下左右中央表示

もくじ

• 表示例
• HTMLコード
• CSSコード

表示例

• サンプルページを見る
• 定規付きサンプルページを見る

HTMLコード

• • <div class="width-height-center">上下 左右 中央 表示</div>

CSSコード

• • :root{
  • /*背景色*/--body-background-color:rgb(248,248,248);
  • /*------*/
  • /*横幅　*/--div-width:50%;
  • /*余白　*/--div-padding:calc(16px / 1.6) 16px calc(16px / 1.6) 16px;
  • /*外枠　*/--div-shadow:0 0 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
  • /*背景色*/--div-background-color:rgb(252,252,252);
  • /*位置　*/--div-text-align:center;
  • /*文字　*/--div-font-size:16px;
  • /*行間　*/--div-line-height:1.6;
  • }
  • html,body{
  • position:relative;width:100%;height:100%;margin:0;padding:0;background-color:var(--body-background-color);
  • }
  • div.width-height-center{
  • position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--div-width);margin:0;padding:var(--div-padding);box-shadow:var(--div-shadow);box-sizing:border-box;background-color:var(--div-background-color);text-align:var(--div-text-align);font-size:var(--div-font-size);line-height:var(--div-line-height);
  • }