Aligning the block both vertically and horizontally

I've been trying to center a red block both horizontally and vertically like shown in the picture below, but it's not positioned correctly. I'm using Bootstrap 4. Can anyone point out what's wrong?

https://i.sstatic.net/3ZGg6.png

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row header-layout">
    *Some content*
  </div>

  <div class="row content-layout">
    <div class="col-6 left-side">
      *Some content*
    </div>

    <div class="col-6 right-side">
      <div class="row right-title">
        *Some Text*
      </div>
      <div class="row parent">
        <div class="child">
          *Some content*
        </div>
      </div>
    </div>
  </div>
</div>

htmltwitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Answer №1

To easily center an element, utilize flexbox.

For a comprehensive tutorial on Flexbox, check out this guide.

.parent {
  height: 100px;
  width: 100px;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center; }
  
.child {
  height: 50px;
  width: 50px;
  background: red; }
<div class="parent">
  <div class="child></div>
</div>

Answer №2

I made some adjustments to the bootstrap classes and CSS. Hopefully, this will be helpful :)

div {
  border: thin solid black;
}

.child {
  position: relative;
  margin: auto;
  width: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row header-layout">
    *Container content*
  </div>

  <div class="row content-layout">
    <div class="col-6 left-side">
      *left content*
    </div>

    <div class="col-6 right-side">
      <div class="row right-title">
        *Right Text*
      </div>
      <div class="row">
        <div class="child">
          *Child content*
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

To achieve this layout, utilize the latest Bootstrap 4 flexbox utilities..

<div class="container-fluid h-100 d-flex flex-column">
  <div class="row header-layout">
    *Add your content here*
  </div>

  <div class="row content-layout flex-grow">
    <div class="col-6 left-side d-flex flex-column">
        <div class="row">
            <div class="col-12 text-center">content</div>
        </div>
        <div class="row flex-grow">
            <div class="col-12 text-center my-auto">content</div>
        </div>
    </div>

    <div class="col-6 right-side d-flex flex-column">
      <div class="row right-title"> 
        <div class="col-12 text-center">title</div>
      </div>
      <div class="row parent flex-grow">
        <div class="child col-6 mx-auto my-auto">
          <div class="card card-block">child</div>
        </div>
      </div>
    </div>
  </div>
</div>

Check out a live example here.

Remember to ensure that the body and html elements have a height of 100%. Additionally, I included a flex-grow class to make sure the content occupies the remaining height. It's possible that in the future, Bootstrap may integrate this as a utility class, eliminating the need for extra CSS rules. Learn more about potential updates here.

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

Resizing webpages for mobile devices results in misaligned rows

I'm currently using Bootstrap on a website and encountering issues with the responsiveness of rows on mobile devices. The desired outcome is for rows to be divided into 4 equal sections per row on larger screens, then scale down to 2 equal sections p ...

htmlcsstwitter-bootstrapmobile

Enable scrolling exclusively for the content within a tab, without affecting the tab label in Clarity Tabs

I have a tab with lengthy content in my project (check out the StackBlitz reference here). This causes the appearance of a scroll. https://i.sstatic.net/ZcNKM.png The corresponding code snippet is provided below: <div class="content-container&qu ...

cssangularscrollvmware-clarity

Customize Radio Button Color in Bootstrap 3 with JQuery

Here is the code for my radio buttons: <div class="form-group text-danger"> <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Is a Remix</label> <div class="col-md-8"> ...

jquerycsstwitter-bootstrap-3

Is there a copyright concern regarding CSS?

There are countless websites that spark my creativity. If I am inspired by a particular design, CSS, or JavaScript on one of these sites, am I allowed to copy it to my local folder and use it? For instance, let's say I come across a website called xy ...

css

Tips for toggling CSS classes based on the user's current page

<nav id="navMenu" class="navMenu"> <ul> <li class="active homePage"> <a href="index.php" title="Homepage">Home</a> </li> <li class="resourcesPage"> <a href="re ...

javascriptjqueryhtml

How to Utilize Raw HTML in GWT with the Power of Jquery/Javascript?

Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function( ...

javajavascriptjqueryhtml

HTML Brickwork Picture Arrangement

I recently integrated this code into a WordPress theme and encountered an issue where the new images are displaying vertically instead of horizontally. I am seeking assistance in aligning the new images to appear on the green line instead of the red line a ...

htmlcsswordpressimagemasonry

Activate a pointer cursor when hovering over a TextField in Material-ui design

Hey there! I'm new to Material-ui/ReactJS and I have a question. I'm trying to change the cursor to a pointer when hovering over a Material-ui TextField, but it's proving to be quite challenging. The default behavior is 'cursor: text&ap ...

cssreactjsmaterial-ui

Leveraging CSS nth-child selector in conjunction with ngFor in angular2

Looking for a way to style odd and even rows differently in my dynamically generated table using ngFor directive in angular2. *ngIf="AreThereMyOldMessages" *ngFor="let oldm of MyOldMessages;let i=index" *ngIf="AreThereMyNe ...

cssangularcss-selectors

When linking to a section, the Bootstrap navbar obscures the top part of

I have been working on my inaugural website for educational purposes and encountered the following issue: Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar. <body data-s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a feature similar to Google/YouTube Insight called "Interactive PNGs"?

Recently, I have been exploring the YouTube Insight feature and I am intrigued by how their chart PNGs are generated. When you view the statistics for a video, the information is presented in interactive PNG images. These images seem to be entirely compos ...

phpjavascripthtmlchartspng

I'm having trouble getting my HTML <button> element to function correctly

I'm currently working on a project where I need to animate a green bar moving upward over a blue bar when a button is clicked. However, no matter what I try, the button doesn't seem to be working. I've experimented with using both the button ...

htmlcssbuttononclicktags

Can the styling and variables of Bootstrap4 be altered dynamically?

I have recently started working on a project that utilizes Bootstrap4 for design and layout. However, there is now a need for the ability to change certain core styles (such as font-face, primary color, and background color) dynamically at runtime. Curren ...

csssassbootstrap-4themesmeteor-blaze

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

Prevent automatic scrolling to the top of the page after submitting a form. Remain at the current position on the

After submitting a form, I want to prevent the page from automatically scrolling back up. How can I keep the same position on the page after form submission? <script type="text/javascript"> var frm = $('#form'); frm.submit(function ...

javascriptphpjqueryhtmlajax

AngularJS field array

Is it possible to create an array that contains references to the fields in a form (such as input, textarea, etc.) and then run a function on them in my code, like addClass()? To clarify my objective - I am looking to add a red border color to any invalid ...

cssangularjs

What is the best way to modify the text color in an MUI Text Field?

I'm completely new to using MUI and React, and I've run into an issue with changing the text color in my input field. Even though I specified inputProps={{sx: { color: "CCCCCC" }}}, the text color remains black while the label and searc ...

cssreactjsmaterial-ui

Is there a way to trigger a click event on an href using asp code behind?

Is there a way to programmatically trigger a click event on the href "shipping_question_ID_product_received_as_ordered_link" from the code behind of an ASP form? This href triggers a complex function in jquery when clicked by the user. I need to simulate ...

c#jqueryhtmlasp.net.net

Could you show me how the easyrtcid is generated in the demonstration of audio-only chat? I would appreciate a step-by

Currently, I am utilizing the easyrtc webpage to test out the audio only chat demo and everything seems to be running smoothly. However, when connecting, the easyrtcid variable is automatically assigned a random string. I was wondering if there is a way t ...

javascripthtmlsocket.iowebrtc

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss