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: 
css
×

Hey! Don't miss a new cool stuff!

Comments

12/09/2021 - 17:58
buy cialis onli... (not verified)

cialis online barcelona

12/09/2021 - 18:20
cheap cialis online (not verified)

cialis for order

12/09/2021 - 18:21
cheap cialis online (not verified)

cialis for order

12/09/2021 - 20:34
buy cialis onli... (not verified)

cheapest accutane 40 mg

12/09/2021 - 21:47
gabapentin davis pdf (not verified)

Amoxil Reaction Allergique

12/10/2021 - 04:59
gabapentin 300mg (not verified)

Non Us Pharmacies

12/10/2021 - 15:49
Anonymous (not verified)

This is a good post. This post gives truly quality information. I’m definitely going to look into it. Really very useful tips are provided here. Thank you so much. Keep up the good works. 파워볼사이트

12/18/2021 - 20:24
finasterid (not verified)

Filling Your Viagra Prescription

12/19/2021 - 02:51
finpecia usa (not verified)

Acheter Viagra Le Vrai

12/19/2021 - 15:42
canada viagra online (not verified)

Genetic Viagra Using Mastercard

12/20/2021 - 05:14
where to buy me... (not verified)

Cialis Mit Rezept

12/20/2021 - 10:02
viagra starter (not verified)

How To Get Samples Of Viagra

12/20/2021 - 10:29
azithromycin price (not verified)

Cephalexin Penicilin

12/20/2021 - 16:39
viagra online 100mg (not verified)

Canadian Pharmacy Tylenol 3

12/20/2021 - 22:14
info viagra (not verified)

prices cialis

12/21/2021 - 01:57
buy generic via... (not verified)

Viagra With Bonus Pills

12/30/2021 - 01:15
productos kamagra (not verified)

cialis levitra pharmacy viagra