tosssaurus
10/27/2017 - 2:23 AM

高さが分からない要素を天地・左右・天地左右の中央に配置する

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

html
content_copyfile_download
<div class="parent">
<p class="child">ビューポートの天地左右の中央に配置</p>
</div>
css
content_copyfile_download
.parent {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
}