CODEWITHSUNDEEP
htmlcss
fightstarr20
fightstarr20

Reputation: 12568

HTML and CSS horizontal and vertical centering with header

I'm trying to create HTML layout where the header is 110px high and the content has a vertically and horizontally centered box.

Here is what I have (https://jsfiddle.net/9L58mn08/):

body {
  margin:0;
  background-attachment: fixed;
  background-color: #464646;
  background-image: url("https://pixabay.com/get/e837b2092dfc003ed1534705fb0938c9bd22ffd41db419439cf5c17ea5/beach-1236581_1920.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}
.header {
  background: #333333 none repeat scroll 0 0;
  height: 110px !important;
  padding-top: 0 !important;
  width: 100%;
}
.frame_container {
  left: 50%;
  margin-top: 110px;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.frame{
  background:red;
  padding:20px;
}
<body> 
  <div class="header">
    Header Content
  </div>
  <div class="frame_container">
    <div class="frame">
      This is the centered Content
    </div>
  </div>
</body>

For some reason the frame is not vertically centered, where am I going wrong?

Upvotes: 1

Views: 53

Answers (2)

25r43q
25r43q

Reputation: 623

I'd try som fancy css math.

.frame_container
{
    left: 50%;
    top: calc(50% + 28px);;
    position: absolute;
    transform: translateX(-50%);
}

Or use Bhojendras version.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Apply the margin-top, the half of the height:

.frame_container
{
   left: 50%;
   margin-top: 55px;
   position: absolute;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
}

working demo

Upvotes: 2

Related Questions