How to center the page in css

How to set the page center in css: 1. "text-align:center" sets horizontal centering. 2. "dispaly:flex" setting is horizontally centered. 3. "display:table-cell" sets vertical centering. 4. "position:absolute" sets vertical centering.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Centering is also relatively common in CSS. Let me summarize some of the more familiar writing methods for centering. Of course, there must be more better ways of writing, and you are welcome to correct me on any deficiencies in the article.

Suppose now this scenario is given:

<p class="parent">
  <p class="child">
    DEMO
  </p>
</p>

Among them, the content length in class='child' is not certain, and now it is necessary to achieve the centering of this div.

1. Horizontal centering

1.1text-align: center

To center an inline element or an inline-like element in a block-level parent container, just use text-align: center,
This method can center inline/inline-block/inline-table/inline/flex.

.child {
  display:inline-block;
  /*子元素文字会继承居中，因此要在上面写上向左边居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

When there are multiple child div, if you set display: inline-block, you need to pay attention to the gap between each div. This is not a bug , the characteristics are like this.

If you want to remove these gaps, there are several solutions:

1. Remove spaces in HTML.

The reason for the white space between elements is because of the gaps between tag segments. At this time, you only need to remove the gaps between HTML.

For example, this way of writing, of course there are many ways to write it, just make sure to remove the gaps, but this method always feels a bit anti-human to write.

<p class="parent">
  <p class="child">
  DEMO1</p
  ><p class="child">
  DEMO2</p
  ><p class="child">
  DEMO3</p>
</p>

2. Use negative margin values

The negative value of this method is not easy to determine, and it is related to the context font, etc. This method is not suitable for large-scale use.

.child {
  margin-right; -5px;
}

3. Use font-size: 0

This method can solve this spacing problem very simply. You only need to set the font-size of the parent div to 0, and then remember to set the child div Just set the font-size property back.

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

4. Use letter-spacing or word-spacing

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

1.2 dispaly: flex

Only compatible with IE10

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

2. Vertical centering

1.1display: table-cell

Elements with different heights can be vertically centered

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

2.2 position: absolute

.parent {
  position:relative;
}
.child{
  position:absolute;
  top:50%;   /* 参照物是父容器 */
  transform:translateY(-50%); /*百分比的参照物是自身 */

Recommended learning:

CSS video tutorial

The above is the detailed content of How to center the page in css. For more information, please follow other related articles on the PHP Chinese website!