CSS Vertical horizontal Full Center manual

Center horizontally

Inline or inline-* center?

You can have him center-aligned relative to the parent block-level element.

. center-children {  text-align:center;}

Blocks level element (block levels) centered?

You can set Margin-left and margin-right to Auto to center it (and also to set width, otherwise it will fill the entire container and cannot see the center effect), such as.

. center-me {  margin:0 auto;}

What if there are many block-level elements?

If you have a very uniform block level element that needs to be centered horizontally, you'd better use a different display type. This is an example of using Inline-block and Flex.

Online Example: http://jsfiddle.net/ourjs/0b6b7wt8/

<main class= "Inline-block-center" >  <div>    I ' m an element which is block-like with my siblings and we ' re Centered in a row.  </div>  <div>    I ' an element (Block-like) with my siblings and we ' re centered in a row. I have the more content in me than my siblings do.  </div>  <div>    I ' an element (Block-like) with my siblings and we ' re centered in a row.  </div></main>

<main class= "Flex-center" >  <div>    I ' m an element which is block-like with my siblings and we ' re centered In a row.  </div>  <div>    I ' an element (Block-like) with my siblings and we ' re centered in a row. I have the more content in me than my siblings do.  </div>  <div>    I ' an element (Block-like) with my siblings and we ' re centered in a row.  </div></main>body {  background: #f06d06;  font-size:80%;} Main {  background:white;  margin:20px 0;  padding:10px;} Main div {  background:black;  Color:white;  padding:15px;  max-width:125px;  margin:5px;}. inline-block-center {  text-align:center;}. Inline-block-center Div {  display:inline-block;  Text-align:left;}. flex-center {  Display:flex;  Justify-content:center;}

Center vertically

Vertical centering is a little tricky in CSS.

Inline or inline-* centered, like text and links?

Is it a line?

Sometimes the elements can behave like vertical centers, just because they have equal upper and lower padding

. link {  padding-top:30px;  padding-bottom:30px;}

If padding is not available for some reason and the text is not wrapped, you can use Line-height to align the text with height.

. center-text-trick {  height:100px;  line-height:100px;  White-space:nowrap;}

Is it multi-line?

The padding of the top and bottom can also be a multi-line center, but if this method is useless, you can let the text container display in the table cell mode, and then set the text Vertical-align property alignment, like Talbe

Online Demo: http://jsfiddle.net/ourjs/0fn2u4rc/

<table>  <tr>    <td>      I ' m vertically centered multiple lines of text in a real table cell.    </td>  </tr></table><div class= "center-table" >  <p>i ' m vertically centered Multiple lines of text in a css-created table layout.</p></div>

Body {  background: #f06d06;  font-size:80%;} Table {  background:white;  width:240px;  Border-collapse:separate;  margin:20px;  height:250px;} Table td {  Background:black;  Color:white;  padding:20px;  border:10px solid white;  /* default is Vertical-align:middle; */}.center-table {  display:table;  height:250px;  Background:white;  width:240px;  margin:20px;}. Center-table p {  Display:table-cell;  margin:0;  Background:black;  Color:white;  padding:20px;  border:10px solid white;  Vertical-align:middle;}

Block level element Vertical Center?

Do you know the height of the element?

For many reasons, it is not known that the height of the page layout is quite common.

But if your layout has a fixed height, you can center vertically like this:

. parent {  position:relative;}. Child {  Position:absolute;  top:50%;  height:100px;  Margin-top: -50px; /* If not used: Border-box; box model, you need to set this */}

The height of the element is unknown

Although unknown, you still have the possibility to move up the width of 50%

Online Demo: http://jsfiddle.net/ourjs/9sLf7p56/

. parent {  position:relative;}. Child {  Position:absolute;  top:50%;  Transform:translatey (-50%);}

Can you use Flexbox?

It's not surprising that using Flexbox can be a lot easier.

<main>   <div>     I ' m a block-level element with an unknown height, centered vertically within my parent.
  </div> </main>

Body {  background: #f06d06;  font-size:80%;} Main {  background:white;  height:300px;  width:200px;  padding:20px;  margin:20px;  Display:flex;  Flex-direction:column;  Justify-content:center;  resize:vertical;  Overflow:auto;} Main div {  background:black;  Color:white;  padding:20px;  resize:vertical;  Overflow:auto;}

Horizontal and vertical centering at the same time

The element has a fixed width and height

If the width and height of the element are fixed, you need to be absolutely centered, then move up and left 50% of the width, which has excellent cross-browser support.

. parent {  position:relative;}. Child {  width:300px;  height:100px;  padding:20px;  Position:absolute;  top:50%;  left:50%;  Margin: -70px 0 0-170px;}

The width height of the element is unknown

If you don't know the height and width (variable), you can use the Transofrm property to translate negative 50% in two directions

. parent {  position:relative;}. Child {  position:absolute;  top:50%;  left:50%;  Transform:translate (-50%,-50%);}

