Ways to vertically center align a element in the center

http://jsfiddle.net/m9121mxt/ I have an issue with my layout. I'm trying to center the button within the viewmorebutton element vertically, but margin:auto; and text-align: center; are not achieving the desired result. Can anyone advise on how to properly center align the button in the middle? Thank you!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--facebook icon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
.thirdpage{
    height: 90vh;
    background-color: #101427;
}

.thirdoutter{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.viewmorebutton{
    margin:auto;
    height: 80%;
    text-align: center;
}
</style>

<div class="thirdpage">
    <div class="thirdoutter">
        <div class="viewmorebutton">
            <button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
        </div>
    </div>
</div>

javascripthtmlcssfrontendbootstrap-4

Answer №1

To easily center your button, simply add the classes 

d-flex align-items-center justify-content-center
to the surrounding div. No custom CSS is necessary as these built-in Bootstrap 4 classes will handle the alignment perfectly. Utilizing Bootstrap 4 since it's already being loaded will make sense.

Take a look at the functional code snippet below by clicking on the "run code snippet" button:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
.thirdpage{
    height: 90vh;
    background-color: #101427;
}

.thirdoutter{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.viewmorebutton{
    margin:auto;
    height: 100%;
    text-align: center;
}
</style>

<div class="thirdpage">
    <div class="thirdoutter">
        <div class="viewmorebutton d-flex align-items-center justify-content-center">
            <button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
        </div>
    </div>
</div>

Answer №2

To align content in the center of a div, you can use the following CSS properties: set the display property to table for your .thirdoutter class and display table-cell for the .viewmorebutton class.

.thirdpage{
height: 90vh;
background-color: #101427;
}

.thirdoutter{
  display: table;
position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.viewmorebutton{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
margin:auto;
height: 80%;
}
.largercavas{
height: 100%;
width: 50%;
object-fit: cover;
}
.largerimg{
width: 100%;
max-height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="thirdpage">
  <div class="thirdoutter">
    <div class="viewmorebutton">
      <button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
    </div>
  </div>
</div>

Answer №3

In order to transform .thirdoutter into an absolute container for .viewmorebutton, you have assigned it a relative position.

.viewmorebutton {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%) }

By setting position: absolute, the element will be positioned relative to its parent container.

Setting top: 50% will vertically center the item.

Using transform: translate (0, -50%) will move the item up by half of its own height to perfectly center it.

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

The jQuery selector fails to refresh after the dynamic insertion of new elements

My selector is: $('section#attendance input:last') However, I add another input to section#attendance. I want the selector to target that new element since it should select the last element due to :last. However, for unknown reasons, it does no ...

javascriptjquerytabs

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

I am currently developing an HTML5 web application for WeChat, compatible with both iOS and Android devices, using only pure JavaScript without any third-party libraries like jQuery. The main feature of my app involves creating visually appealing animation ...

javascriptandroidioshtmlcanvas

What causes the NodeJS* event loop to persist even after my Promise has been resolved?

Question Is there a way to make NodeJS pause the event loop until all arguments have been parsed? Info I recently discovered a solution using this and this answer, involving the use of Promise. Now, when the app encounters --password, it waits for user ...

javascriptnode.jsecmascript-6

Ensuring input validity and blocking changes if not compliant with AngularJS patterns

I am looking to create an input field that only accepts the values 1, 2, or 3. To achieve this, I am working on a directive that will prevent any changes to the model if it doesn't match these specific values. For example, if the value is 1 and I tr ...

javascriptangularjsangularjs-directive

Checkbox no longer has an underline when it is checked

My goal is to develop a Todolist app using express.js and node.js. The idea is that when a user checks a checkbox for a task, that specific data in the array should be underlined. However, this feature is not working when I try to implement it via HTTP pos ...

javascriptnode.jsexpressejs

How can you implement a delete button in jQuery DataTables using an API?

Is there a way to incorporate the delete button using the jQuery DataTables API? I have successfully installed the DataTable but am facing challenges in implementing the necessary methods. Any assistance would be greatly appreciated. Thank you! Visit thi ...

javascriptjqueryajaxlaravel-5yajra-datatable

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

javascriptcssreactjsreact-dnd

Dropdown menu utilizing processing API and interacting with AJAX and DOM manipulation

My API data is not showing up in the dropdown menu. If I use ?act=showprovince, I can see the result. example.html <head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" hr ...

javascriptphpjqueryajax

Having trouble getting the Boostrap 4 modal to function properly in asp.net?

Struggling to incorporate a Bootstrap 4 modal popup into my ASP.NET page without triggering a postback. I've tried various suggestions like placing the modal code outside of the form tag or using an update panel, but nothing seems to work. Interesting ...

jqueryasp.netbootstrap-4modal-dialog

What is the reason behind the gray background color showing up exclusively in Google Chrome?

When using other browsers, there are no issues. However, in Chrome, a gray background color appears when hovering over the menu, and partially or completely disappears when moving the mouse away from the menu. Interestingly, it also vanishes completely whe ...

cssgoogle-chromehtml

What is the reason for nesting divs within each other?

Can anyone help me troubleshoot this Django template code? I have noticed that the main-card-faq div is being rendered inside the main-card div even though it's clearly outside. Any thoughts on what might be causing this issue? {% extends 'base.h ...

htmlcssdjango

Perform a POST request in JavaScript and handle the response in PHP

Currently, I am in the process of gathering data through a form and executing this JavaScript: fetch('process.php', { method: 'POST', body: formData, }).then(response => alert( response ) ); The execution of process.php hap ...

javascriptphp

Can Express not use await?

Why am I encountering a SyntaxError that says "await is only valid in async function" even though I am using await inside an async function? (async function(){ 'use strict'; const express = require("express"); const bodyParser = ...

javascriptnode.jsexpressecmascript-6

Flex wrap is causing additional space within the layout

When using flex-wrap, if there are more textBoxes than the available width in the container, they shift to the next line. This is fine, but it leaves too much space between the button and the textBox. This spacing issue can make the layout look odd. I hav ...

htmlcss

"Effortlessly move elements with HTML5 drag and drop functionality from either direction

I'm working on an application that requires Html5 Drag and Drop functionality, which is currently functioning well. However, in the app, there may be instances where a dropped item is no longer needed and I want to allow users to re-drag and drop it b ...

javascriptjqueryhtml

Filtering objects in JavaScript using a technique similar to list comprehension

I'm dealing with a basic array structure that resembles: obj = {1:false, 2:true, 3:true} My goal is to extract an array containing all the keys in the object that have a value of true. In Python, you can achieve this easily using: >>> [ke ...

javascriptlodash

Creating a data visualization in JavaScript or jQuery without relying on pre-built graph libraries

Hey there, I could really use some assistance. Does anyone know if it's possible to create a line graph in JavaScript or jQuery without relying on any external libraries? It doesn't have to be visually stunning, just functional. If you have any i ...

javascriptjqueryhtmlgraph

Route parameter in JavaScript: only accept numerical values

Is it possible to restrict parameter types to only accept digits? If a letter or other character is inputted, I want to fallback to a default scenario. Below are the two attempts I've made. app.get('/multi/:num?', function (request, respons ...

javascriptexpresstypesparameters

Mastering the art of seamlessly merging the gradient in the foreground with the background

I want to achieve a unique rainbow gradient effect using only CSS, overlaying it on top of an existing background. The main objective is to make the rainbow fully opaque at the center and gradually transparent towards the edges, seamlessly blending with th ...

csscss-mask

Discover the ins and outs of integrating YAML front matter into your destination directory path

I am looking to customize the path of my blog posts to include a fancy date format like /blog/2013/09/17 so that the links from my previous octopress blog remain intact. Within the YAML front matter on each markdown page, I have included the date informat ...

javascriptgruntjspermalinkstemplatingassemble