CSS Vertically Centering a Fixed Positioning Div

css vertically centering a fixed positioning div

Alternatively, you could try this (only works if you know the height of the image):

#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}

Vertical alignment in a position-fixed div

Apply Bootstrap's flexbox utilities to the parent of the div you're trying to center (this is a good cheatsheet of what different flex properties do if you need it):

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">

    <div class="row">

    

    <div class="col-md">

        <div class="container">

            <div class="row justify-content-md-center">

    

                <div class="position-fixed h-100 col-md-auto d-flex align-items-center">

                    <div class="text-center vertical-center">

                        <h2>Title</h2>

                        <p>Subtext</p>

                        <a data-toggle="modal" data-target="#Modal" href="#">Click me</a>

                    </div>

                </div>

    

            </div>

        </div>

      </div>

    

    </div>

    </div>

vertically align a fixed div

Update your css to this:

#leftmenu{
  top: 50%;
  margin-top: -100px; // half height of this container
}

Center a position:fixed element

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

Thus, provided a <!DOCTYPE html> (standards mode), this should do:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

How to vertically center text span in fixed position div?

The top: 50% trick won't be precise, since it will be a little lower, there are couple of tricks:

Span position is absolute, top is 50% AND margin-top -> -50% of the span height (can try with %, preferably with the height of the span if it's known).

#text_span {
    position: absolute;
    top: 50%;
    margin-top: -50%; //or pixels (according to Mr. Green it has to be pixels)
    width: 100%;
    text-align: center;
}

Wrap the span with a div that has display: table, and the span is display: table-cell

#wrapper-div {
    display: table;
    height: 100%;
}
#text_span {
   display: table-cell;
   width: 100%;
   vertical-align: middle;
}

Working fiddle for the table method: (it doesn't work on the fixed element directly, you have to add another element inside) http://jsfiddle.net/a4ndeza5/1/

Hope this helps.

Vertically align a div with fixed positioning

I don't think position: fixed; is a way to go here, instead of using fixed you should be using absolute but before that assign position: relative; to the parent element and modify your #hideMessage as

#hideMessage {
    display: inline-block;
    padding: 5px 10px;
    background-color: #555;
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 50px;
    top: 50%;
    margin-top: -15px; /* Negate 1/2 the total height of the button, 
                          this value currently is approx */
}

Demo

The reason I insisted position: absolute; is because that it will align related to the parent element whereas using fixed is relative to the viewport.

For more information over positioning, you can refer my answer here

If you have dynamic text

Coming to more cleaner solution, it would be better if you use display: table; for the parent element, and display: table-cell; for the child elements, and for the parent element of the button i.e now display: table-cell;, you can use vertical-align: middle; to vertically align the button to the dynamic text on the left hand side and also on resize, the button won't overlap the text.

Demo 2

#parent {
    background-color: #bbb;
    color: #fff;
    width: 100%;
    padding: 10px;
    display: table;
}
#text {
    width: 80%;
    display: table-cell;
}
#hideMessage {
    display: table-cell;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}

#hello {
    background-color: #555;
    padding: 5px 10px;
    white-space: nowrap; /* Add if you want to prevent the 
                            button to wrap on resize */
}

How to center elements in a fixed position element

No need for inner elements, you can use pseudo elements for this. For the centering, I use one of the most common and robust centering methods:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

along with a positioned parent.

Here's what it looks like:

.note-add {
  position: fixed;
  background: rgb(189, 28, 175);
  width: 75px;
  height: 75px;
  bottom: 0;
  right: 50%;
  border-radius: 50%;
  margin-bottom: 30px;
}

.note-add::before,
.note-add::after {
  content: "";
  position: absolute;
  background: red;
  width: 30px;
  height: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.note-add::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

<div class="note-add"></div>

CSS Vertically Centering a Fixed Positioning Div