レイアウト、表示領域を真ん中に指定する、幅を調整する

コンテンツが常に真ん中に表示されるように

覚えたので覚え書き。 BEMで言う、ところのレイアウトに当たる部分でしょうか。

サンプルコード

ウインドウの幅を変えてみてください。常に幅に合わせてdivとh4が真ん中に表示されると思います。

解説

bodyに幅を指定

body {
  width: 100%;
}

headerをpositionの基準に指定

header {
  position: relative;
}

内包されるコンテンツのpositionの基準とするため、position: relative;を指定します。

divをbodyに対して90%幅にし、中央揃えする

header div {
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  position: absolute;
}

leftとrightの両方の位置を0に指定し、 それだけだと間隔がわからなくなるのでmargin: auto;を当てます。

横幅はbodyに対しての90%になります。

h4をdivに対して60%幅にし、中央揃えする

header div h4 {
  left: 0;
  right: 0;
  margin: auto;
  width: 60%;
  position: absolute;
}

上と同じくleft``rightの指定、margin: atuo;を当てて、中央に揃えます。 幅は親のdivに対して60%となります。