css [css：centering]没有flexbox的css居中的注释。 #css

Posted 2021-05-13

/* 
refs: 
http://youknow.jp/web/css-position
http://bashalog.c-brains.jp/11/10/13-200523.php
*/

/* absolute の上下左右中央寄せを強引に */
.hoge {
  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:好きな値;
}


/* 縦方向の中央寄せ */
/* 1. とりあえずtable-cell+vertical-alignでよくね？ */
.hoge {
  display: table-cell;
  vertical-align: middle;
}

/* 縦サイズの1/2だけネガティブマージン */
.hoge {
  position:absolute;
  top: 50%;
  margin-top: -50px ;
}

/* 複数行かつ行数が決まっている */
.hoge {
  position:absolute;
  top: 50%;
  line-height: 1.8;
  margin-top: -2.7em; /*（line-height）×（行数）/2 */
}

/* heightとline-heightに同じ値を指定(1行のみ) */
.hoge {
  height: 50px;
  line-height: 50px;
}

/* 画像中央寄せ(テキスト1行) */
.hoge img {
  vertical-align: middle;
}

/* 画像+テキスト複数行 */
.hoge img {
  display: inline-block;
  vertical-align: middle;
  *zoom: 1; /* for IE6-7 */
  *display: inline; /* for IE6-7 */
}
.hoge .txt {
  display: inline-block;
  vertical-align: middle;
  width:250px; /* require */
  *zoom: 1; /* for IE6-7 */
  *display: inline; /* for IE6-7 */
}