web関連

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

2020/01/10

2020/02/03

/

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文で回す方法書いてあった
「getElementsByClassName()」を使って要素を取得する方法 bodyを非表示しようと思って書いたコード <...

前に書いた取得した要素をループで回さないと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だけで事足りる
 

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