The title of the question and the content is actually different, so I will post two solutions for that using Flexbox.
I guess Flexbox will replace/add to the current standard solution by the time IE8 and IE9 is completely destroyed ;)
Check the current Browser compatibility table for flexbox
Single element
.container {
display: flex;
justify-content: center;
}
Multiple elements but center only one
Default behaviour is flex-direction: row which will align all the child items in a single line. Setting it to flex-direction: column will help the lines to be stacked.
.container {
display: flex;
flex-direction: column;
}
.centered {
align-self: center;
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
