I plan to change my job next year, so NOW I start to sort out and learn the interview questions.

Recently just review CSS, saw about a center topic, so by the way will be more commonly used center plan sorted out, share with you.

Github:github.com/OUDUIDUI/fe…

Horizontal center

Inline elements

If the inline element is horizontally centered, simply set its parent element to text-align: center.

<div class="center">HelloWorld</div>
Copy the code
.center {
    text-align: center;
    width: 100vw;
}
Copy the code

Block-level elements

Margin: 0 auto for block level elements.

<div class="center"></div>
Copy the code
.center {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid # 222;
}
Copy the code

If your block-level element does not have a width set, you can use display: table to do this.

.center {
  margin: 0 auto;
  display: table;
}
Copy the code

The floating element

To center the child element if it contains a float property, you can set the parent element width to fit-Content, along with margin.

<div class="center">
  <div class="float"></div>
  <div class="float"></div>
</div>
Copy the code
.center {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.float {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid # 222;
}
Copy the code

Fit-content: Takes the greater of the following two values

  • Inherent minimum width
  • The inherent preferred width (max-content) and available width (available)

Fit-content is not currently compatible with IE

Flex layout

We can easily achieve horizontal center using flex elastic layout, regardless of whether the element is inline or block-level, just set display: flex; justify-content: center; Can.

<div class="center">
  <div>HelloWorld</div>
</div>
<div class="center">
  <span>HelloWorld</span>
</div>
<div class="center">HelloWorld</div>
Copy the code
.center {
  display: flex;
  justify-content: center;
}
Copy the code

Absolute positioning

We can absolutely position elements and center them horizontally. Meanwhile, we can cooperate with transform and margin-left respectively.

transform

<div class="center">HelloWorld</div>
Copy the code
.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
Copy the code

margin-left

This scheme works if you know the width of the container and then move it half to the left by margin-left.

<div class="center"></div>
Copy the code
:root {
  --box-width: 100px;
}
.center {
  position: absolute;
  left: 50%;
  margin-left: calc(-1 * var(--box-width) / 2);
  width: var(--box-width);
  height: 60px;
  border: 1px solid # 222;
}
Copy the code

Vertical center

Single-line text

If the element is a single line of text, we simply set line-height to the parent element height.

<div class="page">
  <span class="center">HelloWorld</span>
</div>
Copy the code
.page {
  height: 300px;
  border: 1px solid # 222;
}

.center {
  line-height: 300px;
}
Copy the code

Inline block-level elements

If the element is an in-line block-level element, the basic idea is to use display: inline-block, vertical-align: middle, and a pseudo-element to place the content block in the center of the container.

<div class="page">
  <span class="center"></span>
</div>
Copy the code
.page {
  height: 300px;
  border: 1px solid # 222;
}

.center {
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 20px;
  background: #D66852;
}

.page::after..center {
  display: inline-block;
  vertical-align: middle;
}

.page::after {
  content: ' ';
  height: 100%;
}
Copy the code

Flex layout

We can easily achieve horizontal center using flex elastic layout, regardless of whether the element is inline or block-level, just set display: flex; align-items: center; Can.

<div class="center">
  <div>HelloWorld</div>
</div>
Copy the code
.center {
  display: flex;
  align-items: center;
  height: 300px;
  border: 1px solid # 222;
}
Copy the code

Absolute positioning

We can absolutely position elements and center them horizontally. Meanwhile, we can cooperate with transform and margin-top respectively.

transform

<div class="center">HelloWorld</div>
Copy the code
.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Copy the code

margin-top

This scheme applies when the height of the container is known and then moved up half height by margin-top.

<div class="center"></div>
Copy the code
:root {
  --box-height: 60px;
}
.center {
  position: absolute;
  top: 50%;
  margin-top: calc(-1 * var(--box-height) / 2);
  height: var(--box-height);
  width: 100px;
  border: 1px solid # 222;
}
Copy the code