2018-05-22 How CSS is centered

This article is a translation of the relevant introduction to centering from CSS Tricks.

1, horizontal center 1.1 inline elements are horizontally centered (such as links or text)

Inline elements can be centered horizontally in a parent element of a block level, just:

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

Note: This notation applies to inline, inline-block, inline-table, Inline-flex and so on.
code example:
= + HTML code

= CSS Code

body { background: #f06d06;}header, nav { text-align: center; background: white; margin: 20px 0; padding: 10px;}nav a { text-decoration: none; background: #333; border-radius: 5px; color: white; padding: 3px 8px;}

=

1.2 Block-level elements are centered horizontally

You can margin-left margin-right auto Center a block-level element by setting it and for it (and the element needs to have an width attribute, otherwise it will take up a full line and cannot be centered). It is usually done in such a shorthand way:

.center-me {  margin: 0 auto;}

Note: This is possible regardless of the width of the block-level element you are at or the parent node.
Note: You cannot float an element to a horizontally centered position, but there is a small tip (this article is no longer detailed and can be viewed by clicking on the link itself).
code example:

= + HTML code

<main>  <div class="center">    I‘m a block level element and am centered.  </div></main>

= CSS Code

body {  background: #f06d06;}main {  background: white;  margin: 20px 0;  padding: 10px;}.center {  margin: 0 auto;  width: 200px;  background: black;  padding: 20px;  color: white;}

=

1.3 Two or more block-level elements are centered horizontally

If you have two or more block-level elements that need to be centered horizontally in one row, it's best to make them different display . For example, set it to display:inline-block .

code Example 1:
Note: In the following example, the Inline-block-center <main> label is the parent element set text-align:center , and the child element is set display:inline-block ;
Flex-center's <main> label, using the new elastic box in the CSS3 (with the introduction of MDN) is to set the parent elementdisplay: flex;justify-content: center;
=>html Code

<main class="inline-block-center">  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row. I have more content in me than my siblings do.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div></main><main class="flex-center">  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row. I have more content in me than my siblings do.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div></main>

=>CSS Code

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;}

=

code Example 2:
Note: The following example shows that you have multiple block-level elements stacked together, in which case the auto-margin (that is margin:0 auto ) is still good. That is, multiple block-level elements do not need to be displayed on one line, and the center method is still used margin:0 auto .
=>html Code

<main>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row. I have more content in me than my siblings do.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div></main>

=>CSS Code

body {  background: #f06d06;  font-size: 80%;}main {  background: white;  margin: 20px 0;  padding: 10px;}main div {  background: black;  margin: 0 auto;  color: white;  padding: 15px;  margin: 5px auto;}main div:nth-child(1) {  width: 200px;}main div:nth-child(2) {  width: 400px;}main div:nth-child(3) {  width: 125px;}

=

2, Vertical Center 2.1 inline Element vertically centered

2.1.1 a single inline element vertically centered
code Example 1:
Single-line inline elements use the same padding to create a vertical center effect

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

=

code Example 2:
When a padding fill is not appropriate in some cases, you can make its text line height = The parent element's height is centered vertically.
=>html Code

<main>  <div>    I‘m a centered line.  </div></main>

=>CSS Code

body {  background: #f06d06;  font-size: 80%;}main {  background: white;  margin: 20px 0;  padding: 40px;}main div {  background: black;  color: white;  height: 100px;  line-height: 100px;  padding: 20px;  width: 50%;  white-space: nowrap;}

=

2.1.2 Multi-line inline element vertically centered
code Example 1:
Center with a table layout (Basic obsolete usage)
Note: In the following example, the first one shows the direct use of the <table> label (its <td> label is vertically centered by default), the second shows the parent element <div> setting display:table , the child element <p> settingdisplay: table-cell;vertical-align: middle;
=>html Code

<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>

=>CSS Code

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;}

=

code Example 2:
Use flexbox to center vertically.
Refine the CSS code as follows:

.flex-center-vertically {  display: flex;  justify-content: center;  flex-direction: column;  height: 400px;}具体示例：

=>html Code

<div class="flex-center">  <p>I‘m vertically centered multiple lines of text in a flexbox container.</p></div>

=>CSS Code

body {  background: #f06d06;  font-size: 80%;}div {  background: white;  width: 240px;  margin: 20px;}.flex-center {  background: black;  color: white;  border: 10px solid white;  display: flex;  flex-direction: column;  justify-content: center;  height: 200px;  resize: vertical;  overflow: auto;}.flex-center p {  margin: 0;  padding: 20px;}

=

code Example 3:
Use pseudo-elements to center vertically.
Refine the CSS code as follows:

.ghost-center {  position: relative;}.ghost-center::before {  content: " ";  display: inline-block;  height: 100%;  width: 1%;  vertical-align: middle;}.ghost-center p {  display: inline-block;  vertical-align: middle;}

=>html Code

<div class="ghost-center">  <p>I‘m vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p></div>

=>CSS Code

body {  background: #f06d06;  font-size: 80%;}div {  background: white;  width: 240px;  height: 200px;  margin: 20px;  color: white;  resize: vertical;  overflow: auto;  padding: 20px;}.ghost-center {  position: relative;}.ghost-center::before {  content: " ";  display: inline-block;  height: 100%;  width: 1%;  vertical-align: middle;}.ghost-center p {  display: inline-block;  vertical-align: middle;  width: 190px;  margin: 0;  padding: 20px;  background: black;}

=

2.2 Block-level elements are centered vertically

It is common to not know the height of page layouts, for many reasons: if the width changes, the text flow will change height. Differences in text styles can change height. The difference in the amount of text can change height. Elements with a fixed aspect ratio, like, can change height when resetting the width, and so on.
But if you already know the height, you can:

2.2.1 block-level element height known/OK
That is, setting the child element relative to the parent element is absolutely positioned, the child element is set, and the child element top：50% margin-top is set to negative half its height.

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}

code example:
Note:
=>html Code

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

=>CSS Code

body {  background: #f06d06;  font-size: 80%;}main {  background: white;  height: 300px;  margin: 20px;  width: 300px;  position: relative;  resize: vertical;  overflow: auto;}main div {  position: absolute;  top: 50%;  left: 20px;  right: 20px;  height: 100px;  margin-top: -70px;  background: black;  color: white;  padding: 20px;}

=

2.2.2 height of block-level elements unknown/indeterminate
It can still be centered by pushing half its height to half its height, which is to set the child elements transform: translateY(-50%); , namely:

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  transform: translateY(-50%);}

=>html Code

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

=>CSS Code

body {  background: #f06d06;  font-size: 80%;}main {  background: white;  height: 300px;  margin: 20px;  width: 300px;  position: relative;  resize: vertical;  overflow: auto;}main div {  position: absolute;  top: 50%;  left: 20px;  right: 20px;  background: black;  color: white;  padding: 20px;  transform: translateY(-50%);  resize: vertical;  overflow: auto;}

=

2.2.3 using display:flex layouts
That

.parent {  display: flex;  flex-direction: column;  justify-content: center;}

=>html Code

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

=>CSS Code

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;}

=

3, Horizontal center + Vertical Center 3.1 fixed width high element

Using a negative margin equal to half of the width and height, after you have fully positioned 50%/50%, it will be centered on huge cross-browser support, namely:

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

code example:
=>html Code

<main>    <div>     I‘m a block-level element a fixed height and width, centered vertically within my parent.  </div>  </main>

=>CSS Code

body {  background: #f06d06;  font-size: 80%;  padding: 20px;}main {  position: relative;  background: white;  height: 200px;  width: 60%;  margin: 0 auto;  padding: 20px;  resize: both;  overflow: auto;}main div {  background: black;  color: white;  width: 200px;  height: 100px;  margin: -70px 0 0 -120px;  position: absolute;  top: 50%;  left: 50%;  padding: 20px;}

=

3.2 Wide-High unknown element

If you do not know the width and height, you can use the Transform property and a negative translate in two directions (it is based on the width/height of the current element) to the center, i.e.:

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

code example:
=>html Code

<main>    <div>     I‘m a block-level element of an unknown height and width, centered vertically within my parent.  </div>  </main>

=>CSS Code

body {  background: #f06d06;  font-size: 80%;  padding: 20px;}main {  position: relative;  background: white;  height: 200px;  width: 60%;  margin: 0 auto;  padding: 20px;  resize: both;  overflow: auto;}main div {  background: black;  color: white;  width: 50%;  transform: translate(-50%, -50%);  position: absolute;  top: 50%;  left: 50%;  padding: 20px;  resize: both;  overflow: auto;}

=

• Center with Flexbox

  To center in two directions with Flexbox, you need to use two central properties, namely:

  .parent {  display: flex;  justify-content: center;  align-items: center;}

  =>html Code
  ```
  

I ' m a block-level-ish element of an unknown width and height, centered vertically within my parent.

=>css代码

Body {
Background: #f06d06;
font-size:80%;
padding:20px;
}

Main {
Background:white;
height:200px;
width:60%;
margin:0 Auto;
padding:20px;
Display:flex;
Justify-content:center;
Align-items:center;
Resize:both;
Overflow:auto;
}

Main DIV {
Background:black;
Color:white;
width:50%;
padding:20px;
Resize:both;
Overflow:auto;
}

=>![](https://upload-images.jianshu.io/upload_images/11827773-624191a185674c76.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)#### 3.3 使用grid居中这只是一个非常有效的小技巧（由Lance Janssen上传）=>html代码

I ' m centered!

=>css代码

. wrapper{
height:300px;
width:300px;
border:1px solid red;
Display:grid;
}
span {
Margin:auto;
}
```
=

2018-05-22 How CSS is centered