How to center a
element inside a
container?

Question

I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.

How can I achieve that?

div {
  width: 300px;
  height: 100px;
}
p {
  position: absolute;
  top: auto;
}

<div>
  <p>I want this paragraph to be at the center, but it's not.</p>
</div>

That I know of, you can only vertically center with table cells, JavaScript, or if you know the height of the element to be vertically centered ahead of time — Explosion Pills, Feb 27 '13 at 20:08
@ExplosionPills is right. You'd need to know the height of the
tag. If you did, you could do something like this in your stylesheet: p { width: 200px; height: 10px; position: relative; top: 50%; left: 50%; margin: -100px 0 0 -5px; } — Spencer Cameron-Morin, Feb 27 '13 at 20:14
Here are two simple methods to center an element within a div, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 19 '15 at 21:12

Fico · Accepted Answer · 2013-02-27T21:32:30.287

87

You dont need absolute positioning Use

p {
 text-align: center;
line-height: 100px;

}

And adjust at will...

If text exceeds width and goes more than one line

In that case the adjust you can do is to include the display property in your rules as follows;

(I added a background for a better view of the example)

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}


p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

Play with it in this JBin

enter image description here

edited Feb 27 '13 at 21:32

answered Feb 27 '13 at 20:12

Fico

2,317
18
19

5

I didn't vote you down but this will fail if the text is longer than a single line. – insertusernamehere Feb 27 '13 at 20:13
Alright, I followed your advice and with a little tweaking it worked. div { width:300px; background-color:yellow; padding-top:50px; padding-bottom:50px } p { text-align:center; }

Lorem ipsum dolor sit amet

Like that, it centers perfectly, but Is this the right way to do? – Johnsy Feb 27 '13 at 20:13
@insertusernamehere Thats why he must then adjust at will. As for example wraping the paragraph etc. I was adressing the center issue. – Fico Feb 27 '13 at 20:16
You are welcome @Johnsy Omniscient. Unfortunately , in spite of me trying to help, I recived a down vote. Who knows why!!. Have a good day – Fico Feb 27 '13 at 20:21
Johnsy & @insertusernamehere, Last but not least. I extended my answer to cover the case of a longer text that the width available. I included a jsBin to play with. See you! :) – Fico Feb 27 '13 at 21:37
Ok ok, thanks again, now I've read this thread again and I know what to do next time I encounter this problem. ^_^ – Johnsy Feb 28 '13 at 16:44
This is elegant and the winner answer – Zaffer Jul 20 '22 at 13:49

score 21 · Answer 2 · edited May 23 '17 at 12:32

21

To get left/right centering, then applying text-align: center to the div and margin: auto to the p.

For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div

edited May 23 '17 at 12:32

Community

1
1

answered Feb 27 '13 at 20:19

GordonsBeard

636
4
14

3

margin: auto did the thing! Thanks. – Aleksandar Nov 06 '17 at 10:14

TechDogLover OR kiaNasirzadeh · Answer 3 · 2017-09-19T10:37:25.637

♣you should do these steps :

the mother Element should be positioned(for EXP you can give it position:relative;)
the child Element should have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
for the child Element you should set "margin : auto" (to be middle vertically)
the child and mother Element should have "height"and"width" value
for mother Element => text-align:center (to be middle horizontally)

♣♣simply here is the summery of those 5 steps:

.mother_Element {
    position : relative;
    height : 20%;
    width : 5%;
    text-align : center
    }
.child_Element {
    height : 1.2 em;
    width : 5%;
    margin : auto;
    position : absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }

score 2 · Answer 4 · answered May 05 '22 at 04:15

this is how I do it:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 100px;
    background-color: lightgreen;
}
.paragraph {
    width: 250px;
    background-color: lightyellow;
}

<div class="container">
    <p class="paragraph">I want this paragraph to be at the center, but it's not.</p>
</div>

you can add text-align: center; to the paragraph if you want text alignment to be center

score 1 · Answer 5 · edited Dec 09 '15 at 21:16

1

You only need to add text-align: center to your <div>

In your case also remove both styles that you added to your <p>.

Check out the demo here: http://jsfiddle.net/76uGE/3/

Good Luck

edited Dec 09 '15 at 21:16

JGallardo

11,074
10
82
96

answered Feb 27 '13 at 20:27

John

164
3
12

It was NOT vertically middled. I updated your fiddle : http://jsfiddle.net/9Mk64/ – Milche Patern Feb 27 '13 at 20:53
Yea. I thought he's only asking for a horizontal alignment. – John Feb 27 '13 at 21:15

Milche Patern · Answer 6 · 2013-02-27T20:50:58.130

0

Centered and middled content ?

Do it this way :

<table style="width:100%">
    <tr>
        <td valign="middle" align="center">Table once ruled centering</td>
    </tr>
</table>

I fiddled it here

Ha, let me guess .. you want DIVs ..

just make your first outter DIV behave like a table-cell then style it with vertical align:middle;

<div>
    <p>I want this paragraph to be at the center, but I can't.</p>
</div>

div {
    width:500px;
    height:100px;
    background-color:aqua;
    text-align:center;
    /*  there it is */
    display:table-cell;
    vertical-align:middle;
}

jsfiddle.net/9Mk64/

edited Feb 27 '13 at 20:50

answered Feb 27 '13 at 20:45

Milche Patern

19,632
6
35
52

2

Why provide a solution using `` at all when you know it's wrong?
– cimmanon Feb 27 '13 at 21:11
2

Tables are for tabular data, not for layout purposes. A table containing a single cell in a single row is most definitely not representing tabular data. – cimmanon Feb 27 '13 at 21:25
Oh, symantic point of view, you're right. Centering and middleing, i'm right. – Milche Patern Feb 27 '13 at 21:31

freddy mercury · Answer 7 · 2019-03-05T20:01:52.880

0

on the p element, add 3 styling rules.

.myCenteredPElement{
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
}

edited Mar 05 '19 at 20:01

answered Mar 05 '19 at 19:53

freddy mercury

608
1
7
19

Zoltán Juhász · Answer 8 · 2020-03-12T21:18:08.667

This solution works fine for all major browsers, except IE. So keep that in mind.

In this example, basicaly I use positioning, horizontal and vertical transform for the UI element to center it.

        .container {
            /* set the the position to relative */
            position: relative;
            width: 30rem;
            height: 20rem;
            background-color: #2196F3;
        }


        .paragh {
            /* set the the position to absolute */
            position: absolute;
            /* set the the position of the helper container into the middle of its space */
            top: 50%;
            left: 50%;
            font-size: 30px;
            /* make sure padding and margin do not disturb the calculation of the center point */
            padding: 0;
            margin: 0;
            /* using centers for the transform */
            transform-origin: center center;
            /* calling calc() function for the calculation to move left and up the element from the center point */
            transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
        }

<div class="container">
    <p class="paragh">Text</p>
</div>

I hope this help.

How to center a
element inside a
container?

8 Answers8

Linked

How to center a element inside a container?

8 Answers8

Linked

How to center a
element inside a
container?