html - Vertical alignment in css responsive -


this question might answered 1 , may sound silly. align element whether text, image or div align in center vertically , should work in responsive screens. did try adding margin-top manual percentages. know if there simple , best way make vertical alignment responsive.

i did research in google it, of them suggested change display property of container table , div table cell , use vertical alignment middle. sounds simple effects other elements in page don't want table. hence i'm looking best alternate option. please help. thank in advance :)

.in-middle{     width:100%;     margin-top: 25%;  }
<body>    <div class="in-middle">      <h1>this should aligned in center</h1>      <p>paragraph should centered</p>    </div>  </body>

use following solution using tranform property:

.in-middle{    position: absolute;    top: 50%;    transform: translatey(-50%);  }
<body>    <div class="in-middle">      <h1>this should aligned in center</h1>      <p>paragraph should centered</p>    </div>  </body>


Comments

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -