Skip to content

Instantly share code, notes, and snippets.

@scastiel
Created September 3, 2014 10:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scastiel/7c172e092cb37ad45648 to your computer and use it in GitHub Desktop.
Save scastiel/7c172e092cb37ad45648 to your computer and use it in GitHub Desktop.
A Pen by Anonasaurus Rex.
<div id="parent">
<div id="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis, diam eget mattis mollis, arcu ante pharetra lorem, non rutrum eros sem eget elit
</div>
</div>
#parent {
border: 1px solid black;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
#child {
width: 300px;
height: 120px;
border: 1px solid red;
padding: 10px;
/* Center the box horizontaly and verticaly */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Center the text verticaly in the box */
display: flex;
flex-direction: column;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment