html5 - How will I write text in the center of the square -

html5 - How will I write text in the center of the square -

here link http://jsfiddle.net/sanand29/7fh2em4f/

<div class="link1"> <a href="#" class="square1"></a> <div>

the css part corresponding it

.link1 { display: block; margin-top: 15%; width: 78%; margin-left: 26%; } a.square1 { width: 50%; height: 50%; border: 1px solid red; padding: 9%; margin-top: 0%; background-color: #fafafa; opacity: 0.5; }

how set text in center of square keeping responsive.

try this

<div class="link1"> <div class="square1">text centred</div> </div>

and css

div.link1 {position: relative; width: 200px; height: 200px; border: 1px solid red;} div.square1 {height: 20px; text-align: center; margin: auto; position: absolute; top: 0px; left:0px; bottom:0px; right:0px;}

this maintain text in middle of box. in fact keeps div class square1 centred - text may overflow div, depending on size of font choose. if set height of div height of font can't go wrong.

html5 css3