Centering vertically and horizontally a div inside another div in html and css

Question

I have a website where I post articles, my problem is that I have a div inside another div that is not vertically and horizontally centered and now it located in top of parent div... I need to center vertically and horizontally div "author"...

Here is a piece of html code affected by this issue...

<div class="postcell">
  <div class="postshort75">21 Dicembre 2011 09:08:48 &#183; [Nel mondo, &egrave; Natale!]</div><div class="postshort25">Postato da</div>
  <div class="cleardiv"></div>
  <div class="postsxboxed"><div class="alignment">
  <a href="http://www.alecos.it/files/Natale2011.jpg" class="highslide" onclick="return hs.expand(this)"><img class="model" src="http://www.alecos.it/php/thumb.php?src=http://www.alecos.it/files/Natale2011.jpg&amp;x=420&amp;y=262&amp;f=0" align="left" style="margin: 5px 5px 5px 5px" alt="Immagine" title="Clicca Per Ingrandire"></a><span style="font-style: italic">In un mondo ogni giorno pi&ugrave; oscuro, pi&ugrave; frenetico, ingiusto e immorale, la speranza di un lieto futuro &eacute; la &quot;Luce&quot; che nasce a Natale. Solo &quot;Lui&quot; pu&ograve; incarnare l&#39;amore e irradiarlo in un mondo in declino, chi l&#39;accoglie trasforma il suo cuore e intraprende un pi&ugrave; giusto cammino. Un cammino che inizia dal nulla, da una semplice gelida grotta, da un &quot;Bambino&quot; in un&#39;umile culla, da una &quot;Santa&quot; magnifica notte. Ma prosegue per tutta la terra dove regna miseria ed orrore, dove soffiano venti di guerra, dove l&#39;odio sovrasta l&#39;amore, dove il debole invoca giustizia, l&#39;affamato non ha da mangiare, i bambini tra topi e sporcizia, tanti uomini a soffrire e pregare. Proprio qui s&#39;interrompe il cammino per infondere nuove speranze, per mutare a fratelli il destino accorciando inumane distanze. Che sia questo per tutti un dovere, il trionfo del bene sul male, Dio &eacute; &quot;Amore&quot; ma senza frontiere, dice il &quot;Bimbo&quot; che nasce a Natale.</span>
</div></div><div class="postdxboxed"><div class="author"><a href="mailto:alecos@alecos.it?subject=Diario:%20Nel%20mondo,%20&egrave;%20Natale!&amp;body=Gentile%20visitatore,%20La%20informo%20che%20messaggi%20offensivi%20o%20volgari%20verranno%20scartati,%20buona%20prosecuzione." class="hyperlink">Alessandro Marinuzzi</a><br><br><div class="srtgs" id="rt_50492"></div></div></div>
</div>

Div author, as you can see from this screenshot, is in top and I need to move to middle of parent div...

example

This is my css...

/* Style Main Box Content */
.postcell {
  background-image: url("../bkg/Bkg_96.png");
  border: #6666FF 1px solid;
  box-shadow: 0 0 15px #888;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  display: table;
}
/* Style Box Title Left (Topic) */
.postshort75 {
  font-family: Arial, Helvetica, FreeSans, 'Nimbus Sans L', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  font-weight: bold;
  font-variant: normal;
  color: #E6E6FA;
  background-image: url("../bkg/Bkg_115.jpg"); /* Barra Blue */
  background-color: #6666FF;
  border-bottom: #6666FF 1px solid;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 auto;
  vertical-align: middle;
  width: 75%;
  float: left;
  display: table-cell;
}
/* Style Box Title Right (Posted By) */
.postshort25 {
  font-family: Arial, Helvetica, FreeSans, 'Nimbus Sans L', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  font-weight: bold;
  font-variant: normal;
  color: #E6E6FA;
  background-image: url("../bkg/Bkg_115.jpg"); /* Barra Blue */
  background-color: #6666FF;
  border-bottom: #6666FF 1px solid;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 auto;
  vertical-align: middle;
  width: 25%;
  float: right;
  display: table-cell;
}
/* Style Box Post Left (Content of Article) */
.postsxboxed {
  border-right: #6666FF 1px solid;
  width: 75%;
  float: left;
  padding: 5px;
  display: table-cell;
  min-height: 90px;
}
/* Style Box Post Right (This Box contains div Author) */
.postdxboxed {
  border: none;
  width: 20%;
  margin: 0 auto;
  vertical-align: middle;
  float: right;
  padding: 5px;
  margin-right: 18px;
  display: table-cell;
  min-height: 90px;
}
/* Box Author Post */
.author {
  min-width: 200px;
  min-height: 90px;
  vertical-align: middle;
}

How can I solve this issue? Any help is appreciated :)

example

Float: right does not work with centering so that needs to be removed. To answer your question: http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div — Carsten, Oct 16 '14 at 07:45

score 2 · Accepted Answer · answered Oct 16 '14 at 07:51

2

You can use the display:flexproperty to center the div both horizontally and vertically inside the parent.

Apply the following properties to the parent of the author div which you want to align.

  display:flex;
 justify-content:center;
 align-items:center;

Read More on Flex here

Note:flex property is vendor specific.You should appropriate vendor prefixes for it to work

answered Oct 16 '14 at 07:51

Sunil Hari

1,716
1
12
20

after tests and tests... I finally have a working css... as I wanted... `/* Style Main Box Content */ .postcell { background-image: url("../bkg/Bkg_96.png"); border: #6666FF 1px solid; box-shadow: 0 0 15px #888; width: 95%; margin: 0 auto; text-align: center; display: table; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }` – Alessandro Oct 31 '14 at 09:29
I have only a question... display: table; and display: flex; are compatibles inside the same class css? – Alessandro Oct 31 '14 at 09:30

score 0 · Answer 2 · answered Oct 16 '14 at 07:50

0

Try something like this. Check the demo here

HTML

<div></div>

CSS

div { width: 100px; height: 100px; background-color: red;

position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;

}

answered Oct 16 '14 at 07:50

Deepak Biswal

4,280
2
20
37

giving height: 200px; or another fixed value the div box increases its height but if I give height: 100%; do not happen nothing... I thing the problem is due to the fact that I have to use float and display: table-cell for problems mine... if I give a fixed height works but with dynamic height not... In these days I tried all possible css hacks without success... I don't know now how to solve the issue... seems very hard to solve... – Alessandro Oct 24 '14 at 12:38
Can you add it in a fiddle what exactly the problem is? – Deepak Biswal Oct 27 '14 at 07:06
Missing cleardiv... updated fiddle: http://jsfiddle.net/5t0d84r8/2/embedded/result/ – Alessandro Oct 28 '14 at 13:14
Updated fiddle: http://jsfiddle.net/5t0d84r8/4/ Updated fiddle: http://jsfiddle.net/5t0d84r8/4/embedded/result/ – Alessandro Oct 30 '14 at 12:13

score 0 · Answer 3 · answered Oct 16 '14 at 07:52

HTML:

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

</div>
</div>
</div>

CSS:

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto; 
width: /*whatever width you want*/;
}

score 0 · Answer 4 · answered Oct 16 '14 at 07:55

HTML

<div class="container">
  <div class="cent"></div>
</div>

CSS

*{
  margin:0;padding:0;  
}

html,body{
  height:100%;   
}
body{
  display: table; 
   margin: 0 auto;
}

.container{  
  height: 100%;
  display: table-cell;   
  vertical-align: middle;    
}
.cent{
  height:50px;
  width:50px;
  background-color:black;      
}

Centering vertically and horizontally a div inside another div in html and css

4 Answers4