CSS Centering Tricks

CSS centering tricks

Stick with Margin: 0 auto; for horizontal alignment;
If you need vertical alignment as well use position: absolute; top: 50%; margin-top: -(width/2)px; Be aware though, If your container has more width than your screen a part of it will fall off screen on the left side using the Position: absolute method.

css trick for centering horizontal and vertical

Use line-height property.

Set it equal to height of element, and text will be vertically centered.

.cent{
  height: 20px;
  width: 20px;
  text-align: center;
  /*vertical-align: middle;*/
  line-height: 20px;
}

How can I vertically center a div element for all browsers using CSS?

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Vertical Align Methods

Here are 3 very good techniques for vertically centering a child within a container - even when you don't know the height of the child element. The first 2 come from this CSS-tricks article

Markup (for all methods):

<div class="block">    
    <div class="centered">
        Some text
    </div>    
</div>

Solution #1: CSS tables method (FIDDLE)

CSS:

/* This parent can be any width and height */
.block {
  display: table;
   width: 100%;
   background: orange;
   height: 300px;
}

.centered {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   background: pink;
}

Solution #2: Pseudo ('Ghost') element method (FIDDLE)

CSS:

/* This parent can be any width and height */
.block {
  text-align: center;
  background: orange;
  height: 300px;

}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}

Solution #3: Flexbox (FIDDLE)

(Relevant) CSS:

.block {
   background: orange;
   height: 300px;
   display: flex;
   align-items: center;
}

Advanced CSS Tricks: How to align text paragraphs to a baseline grid using multiple columns layout?

Could be a little late for an answer, but nonetheless. By removing the default margin, the alignment of lines behaves like you want:

p {
  margin:0;
}

See: https://jsfiddle.net/w5vs4j59/

center align position absolute object horizontally

A useful trick to center elements is to use the transform: translate style together with either top, margin-left left or margin-top.

To answer your question, you have to apply the following styles to your .slider a.downarrow element:

left: 50%;
transform: translateX(-50%);

---

The way this works is because if translate is used with a percentage value, its value is calculated based on the elements height/width on which it is applied on.

top, margin-left left and margin-top percentage values are calculated based on the parent element or in case the element has position: absolute applied to it based on the nearest parent with position: relative/absolute.

To center an element you just need to apply a value of 50% to either top, margin-left left or margin-top and a value of -50% to translate.

For left and margin-left you have to use translateX(-50%) and for the others translateY(-50%).

EDIT: Added an explanation

Center a percentage based div within a fullscreen div

Demo

http://jsfiddle.net/8BJ94/1/

Code

#hello {
    position : absolute;
    width : 100%;
    height : 100%;
    background-color : #123456;
    text-align: center;
}
#hello:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#mini {
    height : 50%;
    width : 50%;
    background-color : #FFFFFF;
    display: inline-block;
    vertical-align: middle;
}

Based on http://css-tricks.com/centering-in-the-unknown/

How does it work?

• Horizontal centering (easy):

  #hello {
      text-align: center;
  }
  #mini {
      display: inline-block;
  }
  

• Vertical centering:

  1. Make line's height to be 100% height with a ghost element:

     #hello:before {
         content: '';
         display: inline-block;
         height: 100%;
         vertical-align: middle;
     }
     

  2. Center #mini vertically (relatively to that line) with vertical-align:

     #mini {
         display: inline-block;
         vertical-align: middle;
     }
     

Browser support

Essentially everything and IE 8+.

You can support IE7 too if you use a real element as a ghost, instead of a :before pseudo element. But it isn't semantically correct.

Vertically/horizontally centering a pseudo element's generated content

Since pseudo elements are essentially added as children elements, one option is to use a flexbox layout. Add display: flex to the parent element, and then use align-items: center for vertical centering and justify-content: center for horizontal centering.

.block {  height: 150px;  width: 150px;  border: 1px solid black;  display: flex;  align-items: center;  justify-content: center;}.block:after {  content: "content";}

<div class="block"></div>

Centering float:left thing vertically

Fiddle example

First you set position: absolute for the menu div, then set top to 50% and the transform option to -50%.

Source: https://css-tricks.com/centering-css-complete-guide/

Hope this helps

---

Related Topics