Having trouble aligning my fixed div to the center of the screen

Question

Having trouble aligning my fixed div to the center of the screen

I have scoured numerous resources in search of a solution to my problem, but nothing seems to work for me. I have created a simple portfolio site where I want the word 'Developer' to be the first thing visible upon loading, followed by the portfolio as you scroll down.

I have added top padding to my portfolio header to fill the screen, but I can't seem to center the word 'Developer' within it. Being new to this, I must have made a mistake somewhere!

HTML:

<header id="hero">
    <div id="hero_text">Developer.</div>
    <img class="arrow" src="Images/lake_tahoe_img/arrow.svg" alt="Down arrow"></a>
  <a href="index.html" id="logo">
    <h1>Rob Wood</h1>
    <h2>Front-end Developer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

CSS:

#hero {
    padding-top: 800px;
    z-index: -2;
}

#hero_text {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    top: 35%;
    color: white;
    font-size: 9em;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

.arrow {
    width: 50px;
    top: 70%;
    position: center;
    padding-left: 50%;
    position: fixed;
}

html css

Answer 1

Answer №1

For your #hero_text, consider adding text-align:center and removing position:fixed.

The issue with using position:fixed is that the element behaves like an absolutely positioned element, causing it to collapse onto itself without any width for centering.

One solution could be keeping the fixed positioning but specifying a width for the element. With auto margins, you can center both the element and its text content within.

It's worth noting that there is no valid property called position:center as mentioned in the comments.

Answer 2

For your #hero_text, consider adding text-align:center and removing position:fixed.

The issue with using position:fixed is that the element behaves like an absolutely positioned element, causing it to collapse onto itself without any width for centering.

One solution could be keeping the fixed positioning but specifying a width for the element. With auto margins, you can center both the element and its text content within.

It's worth noting that there is no valid property called position:center as mentioned in the comments.

Answer 3

Answer №2

Are you looking for something similar to this?

In order to center the developer on the page, I utilized

display:flex; justify-content:center

and align-items:center;. With these properties, the word "developer" always remains centered.

body{
  margin: 0px;
}
.box{
  background-color: pink;
  background-size: cover;
  height: 100vh;
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  }
h1{
  font-size:25px;
  }
 .down{
height: 100px;
}

<div class="box">
<h1>
Developer
</h1>
</div>
<div class="down">
 <p>
the rest of the page
</p>
</div>

Answer 4

Are you looking for something similar to this?

In order to center the developer on the page, I utilized

display:flex; justify-content:center

and align-items:center;. With these properties, the word "developer" always remains centered.

body{
  margin: 0px;
}
.box{
  background-color: pink;
  background-size: cover;
  height: 100vh;
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  }
h1{
  font-size:25px;
  }
 .down{
height: 100px;
}

<div class="box">
<h1>
Developer
</h1>
</div>
<div class="down">
 <p>
the rest of the page
</p>
</div>

Answer 5

Answer №3

It appears that you are in need of a code snippet like the one below:

.outer-container {
    position: fixed;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#hero {
    display: inline-block;
    background: #fff;
}

#hero_text {
    font-size: 9em;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

#hero ul {
    list-style-type: none;
}

<div class="outer-container">
    <div class="inner-container">
        <header id="hero">
            <div id="hero_text">Developer.</div>
            <img class="arrow" src="Images/lake_tahoe_img/arrow.svg" alt="Down arrow">
            <a href="index.html" id="logo">
                <h1>Rob Wood</h1>
                <h2>Front-end Developer</h2>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">Portfolio</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
</div>

(check out this Fiddle)

Answer 6

It appears that you are in need of a code snippet like the one below:

.outer-container {
    position: fixed;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#hero {
    display: inline-block;
    background: #fff;
}

#hero_text {
    font-size: 9em;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

#hero ul {
    list-style-type: none;
}

<div class="outer-container">
    <div class="inner-container">
        <header id="hero">
            <div id="hero_text">Developer.</div>
            <img class="arrow" src="Images/lake_tahoe_img/arrow.svg" alt="Down arrow">
            <a href="index.html" id="logo">
                <h1>Rob Wood</h1>
                <h2>Front-end Developer</h2>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">Portfolio</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
</div>

(check out this Fiddle)

Answer 7

Answer №4

One downside of the solution provided is that it requires setting a fixed height and line-height for the outer div (the gray one).

.abs-center {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}
.v-center {
  background: yellow;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
#graybox {
  height: 120px;
  line-height: 120px;
  background: #bbb;
  text-align: center;
}

<div id="graybox" class="abs-center">
  <div class="v-center">
    <p>vertically<br />centered</p>
  </div>
</div>

Answer 8

One downside of the solution provided is that it requires setting a fixed height and line-height for the outer div (the gray one).

.abs-center {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}
.v-center {
  background: yellow;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
#graybox {
  height: 120px;
  line-height: 120px;
  background: #bbb;
  text-align: center;
}

<div id="graybox" class="abs-center">
  <div class="v-center">
    <p>vertically<br />centered</p>
  </div>
</div>

Having trouble aligning my fixed div to the center of the screen

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips on sending multiple values to AngularJS Directive

placed three blocks inside the table cell

The X path and CSS selector for a particular table will vary on every page

Arrange the table by column following a service request

After exiting the PWA, the IOS camera displays a black screen

What is the best way to extract the value from an anchor element?

Comparing inline-block and block display options for displaying images

The CSS rule for @media screen is failing to function properly on mobile devices

Aligning images both horizontally and vertically inside a div with changing dimensions

Reduce the size of a container element without using jquery

Turning off CSS on a Wordpress page

How to open a PDF file in a new tab using Angular

Mastering the Art of Revealing and Concealing

Creating a CSS layout with tabs that include a visually appealing right space

A Step-by-Step Guide on Importing Components in Vue.js

Creating various styles for cards using ngFor within Angular

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

Creating a unique tab spacing effect using HTML and CSS

Looking for assistance with aligning an image in a <td> cell that doubles as a link?

Center the content of the HTML body