Horizontally center a div at the top of the page

Question

How can I center the text in the div vertically and how can I center the div across the width of the screen by placing it at the top?

https://jsfiddle.net/gL320uLr/

<div id='custom'>
  textfsdfsdfsdfsdfsd
</div> 

#custom{
 width: 50%;
 background: #FF0000;
 z-index: 99999;
 transform-origin: center center;
 position: absolute; 
 left:50%;
 top: 10px; 
 margin:0 auto;
 height: 52px;
 border-radius:10px;
}

Possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — André Dion, Apr 11 '17 at 16:30
Possible duplicate of [How do you easily horizontally center a
using CSS?](http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css) — Rob, Apr 11 '17 at 16:39

score 1 · Answer 1 · answered Apr 11 '17 at 16:35

I'm guessing this is what you want

#custom {
  width: 50%;
  background: #FF0000;
  z-index: 99999;
  transform-origin: center center;
  top: 10px;
  position: absolute;
  margin: 0 auto;
  height: 52px;
  border-radius: 10px;
  /*-----*/
  line-height: 52px;
  left: 0;
  right: 0;
}

<div id='custom'>
  textfsdfsdfsdfsdfsd
</div>

To vertically align text in a div you should set the line-height of the div equal to its height, and to horizontally align absolute elements you should set its left and right to zero with margin: 0 auto

score 0 · Answer 2 · answered Apr 11 '17 at 16:37

this works for me

#custom{
  width: 50%;
  background: #FF0000;
  z-index: 99999;
  transform-origin: center center;
  top: 10px; 
  margin:0 auto;
  height: 52px;
  border-radius:10px;
  text-align: center;
  padding-top: 7%;
}

I removed the position absolute stuff and the div was centered. Added some padding to center the text vertically

Horizontally center a div at the top of the page

2 Answers2