天地左右でセンタリングさせる方法
html
|
1 2 3 |
<div class="center"> <p>天地左右<br>中央です</p> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.center{ width:300px; height:300px; position:relative; border:4px solid #ccc; text-align:center; } .center p{ margin: 0 auto; padding: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } |
結果
天地左右
中央です
