Ahmad Shadeed

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

Horizontal center

Inline element

To center inline elements (such as links, spans, or img), text-align: center is sufficient.

<div class="desk">
   <span class="plate"></span>
</div>
Copy the code

.desk {
  text-align: center;
}
Copy the code

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

You can also use text-align: center for multiple inline elements.

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>
Copy the code

.desk {
  text-align: center;
}
Copy the code

Flexbox

Using Flexbox you can also quickly center elements:

.desk {
  display: flex;
  justify-content: center;
}
Copy the code

It also works fine for multiple inline projects:

CSS Grid

When using a grid container, the plates in the diagram are centered according to their grid region. Note that this will not work with multiple plates unless they are wrapped in a single element.

.desk {
  display: grid;
  justify-content: center;
}
Copy the code

A block element

Auto Margin

Block elements with known width and height can be centered by setting margin-left:auto and margin-right:auto.

.plate {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}
Copy the code

For multiple block elements, they should be wrapped in a single element, with the parent element centered.

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
Copy the code

Flexbox

For Flexbox, use context-content: Center to center elements as well:

.desk {
  display: flex;
  justify-content: center;
}
Copy the code

For multiple elements, we don’t need to wrap them in one element, flexbox can center them all.

The CSS positioning

With absolute positioning, we can easily center it horizontally by CSS Transform.

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
Copy the code

If you know the width of the element, you can use a negative margin instead of a CSS Transform.

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}
Copy the code

Vertical center

Inline element

Vertical Padding

One of the easiest ways to center elements vertically is to use padding:

  padding-top: 24px;
  padding-bottom: 24px;
}
Copy the code

Vertical Align

The vertical-align attribute can be used for one or more elements.

In this example, the fork and knife should be centered perpendicular to the table.

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}
Copy the code

Flexbox

To align plates, forks and knives, we can use flexbox:

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
}
Copy the code

A block element

Absolute positioning

By absolutely positioning elements, you can center them vertically using a CSS Transform:

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Copy the code

If you know the height of the element, you can use negative margins instead of transform.

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}
Copy the code

CSS Grid

With A CSS grid, we can use align-items to center items perpendicular to their grid area.

.desk {
  display: grid;
  align-items: center;
}
Copy the code

Horizontal and vertical center

Inline element

The Padding and Text Align

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}
Copy the code

Other element types

Absolute positioning

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
Copy the code

Flexbox

To center elements vertically and horizontally, use context-content :center and align-items: Center:

.plate {
  display: flex;
  justify-content: center;
  align-items: center;
}
Copy the code

CSS Grid

This is done with the place-items attribute, which combines context-content and align-items:

.desk {
  display: grid;
  place-items: center;
}
Copy the code

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: ishadeed.com/article/lea…

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.