CSS3 rowをsection上下中央に配置するには？

利用しているフレームワーク skeleton

こんな感じで、six columnsで
画面右と左に、「画像」と「コンテンツ」を配置しています。

ただ、container、rowの配置が「section」の上端に揃えられていて、下にがっぽりとスペースが空いています。
画像とコンテンツの塊を「section」の上下中央に揃えたいのですが、方法はありますか？

margin-topでやってみたのですが、正確に中央にならず、
レスポンシブの際に画面サイズごとに指定するのも面倒なので
一気にsectionの中央に揃えることができる方法があれば知りたいです。

<divclass="section sample">
    <div class="container">
      <div class="row">
        <div class="six columns ">
          <img class="tablet" src="images/tablet.png">
        </div>
        <div class="six columns right-contents">
          <h1>右側のヘッダー</h1>
          <p class="description">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>
    </div>
  </div>

行動規範の内容に同意します

回答2件

html
1<divclass="section sample">

div と class の間にスペースがないというオチでは?

投稿2016/08/23 08:02

退会済みユーザー

総合スコア0

masaakitsuyoshi

2016/08/23 09:14

teratailに書き写す際に間違っていました汗

行動規範の内容に同意します

ベストアンサー

せっかく.containerがあるのでこれでまとめて中央寄せにしてしまいましょう。

html
1<div class="section sample">
2	<div class="container">
3		<div class="row">
4			コンテンツ
5		</div>
6	</div>
7</div>

css
1.section {
2	position: relative;
3}
4
5.container {
6	position: absolute;
7	top: 50%;
8	left: 50%;
9	background: #acf;
10	transform: translate(-50%,-50%);
11}