web関連

【jQuery,javascript,css】要素を真ん中寄せる方法（個人的まとめ）

2020/01/10

プログラミング

css / 言語-javascript

cssで要素の真ん中よせるのはやったことあったけどjsでの真ん中よせはやったことがなかったので備忘録

HTMLコード

まず最初に使用するhtmlコード

<style>
.parent{
  height: 100vh;
}
.child{
  display: inline-block;
}
</style>
<div class="parent">
  <div class="child">子供だよー</div>
</div>

やること：親(.parent)の中で子供(.child)を真ん中に寄せます

jqueryでの書き方

<script>
jQuery(function($){
  var w = $(window).width();
  var h = $(window).height();
  var cw = $(".child").outerWidth();
  var ch = $(".child").outerHeight();
  $(".child").css({
  "position": "absolute",
  "left": ((w - cw)/2) + "px",
  "top": ((h - ch)/2) + "px"
  });
});
</script>

positionで真ん中よせー

javascriptでの書き方

せっかくなので…

<script>
  var w = window.innerWidth;
  var h = window.innerHeight;
  var cw = document.querySelector(".child").offsetWidth;
  var ch = document.querySelector(".child").offsetHeight;
  var myStyle = {
    position: 'absolute',
    left: ((w - cw)/2) + "px",
    top: ((h - ch)/2) + "px"
  }
  for(var prop in myStyle) {
    document.querySelector(".child").style[prop] = myStyle[prop];
  }
</script>

画面サイズを取得する

幅と高さの取得方法色々書いてある

【JavaScript入門】初心者でも分かる！CSS操作と変更方法について

javascriptでcss追加するとp.style.color = '#fff';みたいに追加しないといけないんだけど、for文で回す方法書いてあった

【javascript】特定のclassのついた要素を取得する方法 https://twotone.me/web/2340/

前に書いた取得した要素をループで回さないとcssの追加ができないってやつ

cssでの書き方

cssだといくつかあるのでよく使うやつ載せておく

positionを使用した場合

.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

positionで真ん中に配置してもずれるのでtransformでいい感じに調整するやり方
よく高さだけ真ん中寄席で使って横はtext-align: center;で揃えることのほうが多いい

flexboxを使用した場合

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

親で指定して真ん中にするやり方(よく使う)

display:table;をかけるパターン

.parent{
  display: table;
  text-align: center;
  width: 100%;
}
.child{
  display: table-cell;
  vertical-align: middle;
}

昔使ってた、flexbox知ってからは使ってない

cssだけで事足りる

吹き出しでコードを紹介するの意外とわかりやすいな… 今度っからそうやってこうかしら？そうなるとスマホ表示の時の事考えんとだし、新しくショートコード作らんと…