Centre div inside another

Question

I am having trouble centering content of one div inside of another because the content doesn't appear.

#searchbkg {
  postition: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}
#searchcentre {
  position: absolute;
  width: 50%;
  margin: 0 auto;
}

<div id="searchbkg">
  <div id="searchcentre">Test</div>
</div>

The green box appears but there is no text inside of it.

Advice use Flex CSS3 http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — kollein, Aug 08 '16 at 15:07
This question has been asked a million times. Be sure to search for similar questions before posting your own. Similar question: http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div — Angel Politis, Aug 08 '16 at 15:19
…and there is a documentation now, for this topic: http://stackoverflow.com/documentation/css/299/centering — feeela, Aug 08 '16 at 15:21

Tyler Roper · Accepted Answer · 2016-08-08T15:15:28.077

Your text is appearing fine, but it won't be centered because you have position: absolute; on the inside div. Change it to position: relative; and it will center horizontally. If you need the text to be centered within the div, you can also apply a text-align: center;.

#searchbkg {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}
#searchcentre {
  position: relative;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid red;
}

<div id="searchbkg">
  <div id="searchcentre">This is a centered div!</div>
</div>

score 1 · Answer 2 · answered Aug 08 '16 at 15:12

You need to make following 3 changes to make your content in center;

You have typo in one css property inside styles of #searchbkg. There is postition while it should be position.
Remove position: absolute from #searchcentre if not needed (Absolute positioning should be used only if you wants to place one element over another).
Add text-align: center in #searchcentre.

#searchbkg{
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}

#searchcentre{
  text-align: center;
  background: orange;
  width: 50%;
  margin: 0 auto;
}

<div id="searchbkg">
  <div id="searchcentre">Test</div>
</div>

score 0 · Answer 3 · answered Aug 08 '16 at 15:21

try this:

#searchbkg{
  postition: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
  text-align:center;
}

#searchcentre{
  display: inline-block;
  width: 50%;
}

<div id="searchbkg">
    <div id="searchcentre">Test</div>
  </div>

Centre div inside another

3 Answers3