How to Vertically Align Elements in a Div

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

In a nutshell _{^{(and to prevent link rot)}}:

Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
For block elements, vertical alignment is harder and strongly depends on the specific situation:
- If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
- If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
- … there are more such special cases.

How to vertically center div inside the parent element with CSS?

The best approach in modern browsers is to use flexbox:

#Login {
    display: flex;
    align-items: center;
}

Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.

Recommended Reading

Browser support
A Guide to Flexbox
Using CSS Flexible Boxes

Align items vertically in a div

Try this:

The .actions container needs to be flex so that the two actions containers will be evenly spaced, side by side.

Each .action container will hold the two anchor containers (which will be 100% height and width). Therefore, the .action containers only need to be width/height 100% themselves.

The a tags within the action containers need to be 100% height/width so that they fill the entire .action container. BUT, to center the text vertically and horizontally, you can use flex so that you can use justify-content: center and align-items:center - which makes the content within them centered both horizontally (justify-content) and vertically (align-items).

.actions {
    width: 100%;
    display: flex;
  }
  .action {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100px; 
    margin: 5px;
    background: #ef5b2b;
  }
  
.action a{
  height:100%;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="actions">
  <div class="action-left action">
    <a href="#" style="color: white">Hello 1</a>
  </div>

  <div class="action-right action">
    <a href="#" style="color: white">Hello 2</a>
  </div>
</div>

How to vertically align items with different sizes?

You can approximate this using baseline alignment and pseudo element. Change baseline with center in the below example to see that left/right will stay at the same place.

.container {  display: flex;  flex-flow: row;  align-items: baseline;  border: 1px solid black;  height:200px;  background:linear-gradient(red,red) center/100% 1px no-repeat}.container:before {  content:"";  height:calc(50% + 0.25em)}.container div {  margin: 10px;  padding: 10px;  border: 1px solid black;}
.container span {  display: block;}

<div class="container">  <div>left</div>  <div>center<span class="nested child">nested content</span></div>  <div>right</div></div>
<div class="container">  <div>left</div>  <div>center</div>  <div>right</div></div>

How do I vertically align text in a div?

The correct way to do this in modern browsers is to use Flexbox.

See this answer for details.

See below for some older ways that work in older browsers.

Vertical Centering in CSS

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Article summary:

For a CSS 2 browser, one can use display:table/display:table-cell to center content.

A sample is also available at JSFiddle:

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

CSS to center vertically four divs side by side inside a wrapper div

Flexbox was designed to deal with exactly this sort of problem.

Just change display: inline-block; on your .checkout-item to:

display: flex;
flex-direction: row;
align-items: center;

display: flex explanation

flex-direction: row explanation

align-items: center explanation

Non-flexbox solution:

Use display: table and display: table-cell to match column heights:

.checkout-item {
    display: table;
}

.checkout-item > div {
  display: table-cell;
  float: none;
}

Vertical align div in a div

* {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}#Startseite {position:relative;}#Startseite .its-background {width:100% !important;height:auto !important;max-width:100% !important;}.CentermiddleStart {position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);    -ms-transform:translate(-50%,-50%);        transform:translate(-50%,-50%);z-index:1;text-align:center;}

<head>  <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head>
<body><div id="Startseite"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="" class="its-background"/ > <div class="container CentermiddleStart">  <div class="row">   <div class="col-12">    <h1>Header</h1>    <h3>Subheader</h3>   </div>  </div>  <div class="row">   <div class="col-xs-6" id="button-right">    <a href="#" class="btn btn-default btn-lg">Get started</a>   </div>   <div class="col-xs-6" id="button-left">    <a href="#" class="btn btn-default btn-lg">Get started</a>   </div>  </div> </div></div></body>