How to center content inside DIV using CSS (horizontal and vertical)

Posted by admin on Sun, 03/26/2017 - 13:29

Here's a collection of working solutions how to center content inside DIV horizontally and vertically (multiline text, image or anything) using CSS.

As an example we will use an image with multiline text to test.

<div class="center-wrapper">
  <div class="center-content">
    <img src="/images/placeholder/200x100.jpg" />
    <br/>This is a multiline text!
    <br/>It should be centered well!
  </div>
</div>

So, here's the list of solutions.

1. Using transform and translateX/translateY

.center-wrapper {
  position: relative;
}
.center-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

DEMO:



This is a multiline text!
It should be centered well!

2. Using flexbox

.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
}

DEMO:


This is a multiline text!
It should be centered well!

PS. Flexbox is supported only in modern browsers.

3. Using table-cell method

.center-wrapper {
  display: table;
  text-align: center;
}
.center-content {
  display: table-cell;
  vertical-align: middle;
}

DEMO:


This is a multiline text!
It should be centered well!
Tags: 
×

Hey! Don't miss a new cool stuff!

Comments

asdfasdf (not verified)

asdfasdfasdfasdf

Michael (not verified)

CSS Horizontal and Vertical that we are talking here is all about www.aussieessay.net, and there is nothing new about it that you want to know. Please tell me what is going on here?

Ronald Thomas (not verified)

I want to learn CSS, PHP and Python programming languages where can I buy these programming languages tutorial for Do My Dissertation anyone can help me?

Anonymous (not verified)

CSS Horizontal and Vertical is the only thing that I can achieve with best custom writing service. I think that they also know about it and they are sure that they will work on it with us. They need more details though.

Add new comment