Middle-align (with the help of Bootstrap-CSS)

I've been working on coding for a website and struggling to vertically center text. I've researched various solutions on StackOverflow and other platforms, like using the display:table and display:table-cell methods, along with the top:50%, transformY approach. However, I'm encountering issues in implementing these methods successfully. Below is the code I'm using in an attempt to vertically center the text. I've followed the top:50%, transformY method for this purpose. Any guidance on what I might be doing wrong would be greatly appreciated.

HTML:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="stylesheet.css">
  <title>Game Timer and Scorekeeper</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row" id="heading">
      <div class="col-xs-12">
        <div class="positioner">
          <h1>Game Timer and Scorekeeper</h1>
        </div>
      </div>
    </div>
    <div class="row" id="top-labels">
      <div class="col-xs-3 labels teamlabel" id="a-label">
        <div class="positioner">
          <h2>Team A</h2>
        </div>
      </div>
      <div class="col-xs-6 labels" id="gameclock-label">
        <div class="positioner">
          <h2>Game Clock</h2>
        </div>
      </div>
      <div class="col-xs-3 labels teamlabel" id="b-label">
        <div class="positioner">
          <h2>Team B</h2>
        </div>
      </div>
    </div>
    <div class="row" id="thirdrow">
      <div class="col-xs-3 pointsclock teampoints" id="pointsA">
        <div class="positioner">
          <h1>POINTS A</h1>
        </div>
      </div>
      <div class="col-xs-6 pointsclock" id="gameclock">
        <div class="positioner">
          <h1>GAME CLOCK</h1>
        </div>
      </div>
      <div class="col-xs-3 pointsclock teampoints" id="pointsB">
        <div class="positioner">
          <h1>POINTS B</h1>
        </div>
      </div>
    </div>
    <div class="row" id="fourthrow">
      <div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
        <div class="positioner">
          <h2>CONTROL A</h2>
        </div>
      </div>
      <div class="col-xs-6 ptcontclock" id="questionclock">
        <div class="positioner">
          <h2>QUESTION CLOCK</h2>
        </div>
      </div>
      <div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
        <div class="positioner">
          <h2>CONTROL B</h2>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS:

.container-fluid {
  width: 100vw;
  height: 100vh;
}

#heading {
  height: 15vh;
  border: 2px solid;
}

#top-labels {
  height: 10vh;
  border: 2px solid;
  width: 100vw;
}

#top-labels .labels {
  border-right: 2px solid;
  border-left: 2px solid;
}

#thirdrow {
  height: 40vh;
  border: 2px solid;
  width: 100vw;
}

#thirdrow .pointsclock {
  height: 40vh;
  border-right: 2px solid;
  border-left: 2px solid;
}

#fourthrow {
  height: 35vh;
  width: 100vw;
}

#fourthrow .ptcontclock {
  border-right: 2px solid;
  border-left: 2px solid;
  height: 35vh;
}

.positioner{
  height:100%;
  width:100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer №1

Give this a shot.

HTML

<main>
   <div>
       I am a block-level element with an unknown height, centered vertically 
       within my parent.
   </div>
</main>

CSS

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}
<main>
  
  <div>
     I am a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>

For more details, visit https://css-tricks.com/centering-css-complete-guide/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can a div tag and its class be nested using CSS in Angular?

Can someone help me with nesting a div tag with the "error" class in CSS? <div [class]="{error: condition}">{{ message }}</div> I want to know how to have the .error selector inside the div selector in the CSS file. Note: The error ...

4 products - all discounted by 25% - featuring stylish borders and margins

After extensively searching the internet, I have come across similar issues but not quite the same as mine. I have a list that I want to display in table form within a parent div taking up the entire width (100%). I aim to show 4 items per row and attempt ...

Display HTML content generated by JavaScript in the page source

Can the HTML elements I've added through JavaScript and jQuery codes be displayed in the page source (ctrl+U)? ...

Guide on displaying search results in separate boxes using HTML

I am struggling with organizing my search engine results in separate boxes on my website. Being new to HTML, I am unsure of how to achieve this layout. Currently, all the results are overlapping each other, and it's creating a messy display. Can anyon ...

Utilizing AngularJS to create a vertical calendar

Looking to create a vertical navigation displaying the date and day for the current week using angularjs. When clicking on the navigation div, I want an alert with the selected date to appear. I attempted this in Plunker using various templates, but was u ...

Tips for aligning text to the right and button to the left while ensuring responsive design with CSS

Trying to align text on the left and the button on the right with space between them in a responsive card design. The button has a background image added to it. Here is my attempted CSS, but the design is not yet fully responsive: .component { disp ...

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

Date Selector Tool for Input Field

Does anyone know how to change the color of the date picker that appears in certain browsers but is unsure about the selector's name? HTML: <form action="pledge.html" method="post"> <input type="date" id="birthday" name="user_bda ...

Tips for preventing my text from disappearing off the screen when I resize it

Hello there and thanks in advance. I've recently delved into the world of HTML and CSS and I'm currently in the process of building my own website. I've encountered an issue with a div container where I'm utilizing Bootstrap elements. T ...

"Enhance your code editing experience in Eclipse with HTML, CSS, and JavaScript syntax

Hi there! I'm looking for a way to enable syntax highlighting for HTML/CSS/JS in Eclipse. My main focus is on developing in Python using the PyDev package, but currently I am working on creating Cheetah templates which are difficult to read without pr ...

Using an HTML img tag without success, despite having the correct link

My HTML img tags are not working even though the link is correct. I have been attempting to resolve this issue for quite some time by researching multiple websites and trying various solutions, but unfortunately, nothing seems to be working. All I want i ...

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

While using OS X, I noticed that in Chrome I have the option to Save as PDF in the print window by setting the destination to "Save as PDF". Is this feature available on Windows? Is there a way to easily save to PDF with just one click? How can I access t ...

The loop in MVC is not functioning properly when dealing with various MapRoutes

I am new to MVC and have a good understanding of C#. While experimenting with MVC in Visual Studio, I encountered an issue that is puzzling me. I am struggling to identify the cause of this error. My goal is to print a variable n number of times. It works ...

"Utilizing Bootstrap CSS along with a variety of other CSS/HTML component bundles

Recently diving into the world of Bootstrap for my ASP.NET MVC project has been a game-changer! I'm in awe of its capabilities and functionality. However, I can't help but wish there were more ready-to-use components available to streamline the d ...

The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

Here is a link to see how my page looks with the header, table, and footer: https://i.sstatic.net/U6tdO.png If you want to see how it looks when responsive (with smaller width), check out this link: https://i.sstatic.net/zsGkc.png I have encountered 2 ma ...

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

Tips for positioning label/input box/button on Internet Explorer 7

Here is a Fiddle example you can check out, along with the corresponding code : <div class="menu-alto"> <ul> <li> <a title="Link" href="#">Link</a> </li> <li class="newsletter ...

Comparing Embedded and Linked JS/CSS

In my experience, I understand the advantages of using linked CSS over embedded and inline styles for better maintainability and modularity. However, I have come across information suggesting that in certain mobile web development applications, it may be m ...

CSS properties for SVG image borders not displaying correctly

I'm having trouble creating a border around a round SVG image with the class "lock feature". When I try to add the border in the CSS element ".lock feature", the text "feature" stays white and the border doesn't show up in the browser. However, i ...

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks. This is my cshtml code: { <div class="h-44 overflow-auto text-left mx-4 mb-4"> <p ...