インライン要素をレスポンシブで上下中央ぞろえにする

質問

インライン要素をレスポンシブで上下中央ぞろえにするする場合display:tebleを使うしかないでしょうか？

下記のようにpositionを使う方法ではすべて中央はできても、下記のように改良して左右のみはできないのでしょうか？
.u-centaring-vartical-position-item {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}

回答No.1

m_matsubara · ベストアンサー

下記と２カ所で示されているものが２つあって各々の意味が矛盾しているので、質問の意図がわかりませんが

エスパー回答を行うと、display:block;でいけると思いますよ。

.parent {
display:block;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
}

http://coliss.com/articles/build-websites/operation/css/css-centering-vertically-and-horizontally.html

お礼

レスポンシブでインライン要素の上下を中央ぞろえにする方法ということです。

レスポンシブなのでハイトとラインハイトを一緒にする方法は使えませんよね。