WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

position:absoluteで要素を中央配置

top,leftを50%に指定しネガティブマージンで要素のサイズ半分をマイナスする

<div></div>
body, html {
  position: relative;
  width: 100%;
}
div {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
}

top,left,right,bottomに0を指定し、marginをautoにする

<div></div>
body, html {
  position: relative;
  width: 100%;
}
div {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

関連記事

mmmmofu.hatenablog.com