CatStyle - キャットスタイル
Web系のお仕事全般やってます!Webシステム構築、ホームページ制作 etc.
  • CSS

absolute(position)で縦横中央寄せにする方法

2017.03.28

【CSS】

.boxCatStyle{
 position: relative;
 overflow: hidden;
 display: block;
 width: 100%;
 min-height: 200px;
 border: 1px #a30528 solid;
}
.txtCatStyle{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 display: inline-block;
 font-size: 1.5rem;
 font-weight: bold;
 color: #a30528;
}

【HTML】

<div class=”boxCatStyle”>
 <span class=”txtCatStyle”>CatStyle!</span>
</div><!–/.boxCatStyle–>

【Result】

CatStyle!
PAGE TOP