arrange text to the center of a container div (single or multiline) [ 771 views ]
Goal: show text in a div like in a table cell
<style> .centercenter{ text-align: center; display: table; } .centercenter p{ display: table-cell; vertical-align: middle; } </style> <div class="centercenter"> <p>I'm on the center<br>of my parent</p> </div>
That’s all. Add some additional styles to the container (size, decoration) and…
I’m on the center
of my parent
Here is a small extra: center a div in a div. The old technik play with the margins.
.divtocenter_container{ position: relative; } .divtocenter{ position: absolute; width: 300px; height: 80px; left: 50%; top: 50%; margin-left: -150px; /* -width/2 */ margin-top: -40px; /* -height/2 */ }