Multiple CSS centring schemes you don’t know!

Time:2020-11-5

Author: Ahmed shaded
Translator: front end wit
Source: ishadeed
Mobile reading:https://mp.weixin.qq.com/s/kp…


Like it and watch it again. Get used to it

this paperGitHub https://github.com/qq44924588…On has included, more previous high praise article classification, also sorted out a lot of my documents, and tutorial materials. Welcome to star and perfect, you can refer to the examination site to review, I hope we have something together.

Everyone said that the resume did not have a project to write, so I helped you find a project, also attached[build tutorial]

horizontally

Inline elements

To make inline elements (such as links,spanorimg)Center, usetext-align: centerthat’s enough.

<div class="desk">
   <span class="plate"></span>
</div>
.desk {
  text-align: center;
}

Multiple CSS centring schemes you don't know!

For multiple inline elements, you can also use thetext-align:center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>
.desk {
  text-align: center;
}

Multiple CSS centring schemes you don't know!

Flexbox

You can also quickly center elements with flexbox:

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

For multiple inline projects, it can also work normally:

Multiple CSS centring schemes you don't know!

CSS Grid

When you use a grid container, the plates in the diagram are centered according to their grid area. Note that this will not apply to multiple plates unless they are wrapped in one element.

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

Multiple CSS centring schemes you don't know!

Block element

Auto Margin

Block elements with known width and height can be set by settingmargin-left:autoandmargin-right:autoCenter the element.

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

Multiple CSS centring schemes you don't know!

For multiple block elements, they should be wrapped in one element and centered on the parent element.

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

Multiple CSS centring schemes you don't know!

Flexbox

The same is true for flexboxjustify-content:centeR to center the element:

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

Multiple CSS centring schemes you don't know!

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

CSS positioning

With absolute positioning, we can easily go through CSStransformCenter it horizontally.

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

Multiple CSS centring schemes you don't know!

Negative margins can be used instead of CSS transform when the element width is known.

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

Vertical center

Inline elements

Vertical Padding

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

  padding-top: 24px;
  padding-bottom: 24px;
}

Multiple CSS centring schemes you don't know!

Vertical Align

vertical-alignAttributes can be used for one or more elements.

In this example, the fork and knife should be centered vertically with the table.

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}
Flexbox

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

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

Multiple CSS centring schemes you don't know!

Block element

Absolute positioning

By absolutely positioning elements, you can use CSStransformCenter elements vertically:

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

Multiple CSS centring schemes you don't know!

If you know the element height, you can use negative margins insteadtransform

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}
CSS Grid

With CSS grid, we can usealign-itemsCenters an item perpendicular to its grid area.

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

Multiple CSS centring schemes you don't know!

Horizontal vertical center

Inline elements

Padding and text align
.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

Other element types

Absolute positioning
.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Multiple CSS centring schemes you don't know!

Flexbox

adoptjustify-content:centerandalign-items:centerYou can center the elements vertically and horizontally:

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

CSS Grid

adoptplace-itemsProperties can be passed through, and it combinesjustify-contentandalign-items:

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

It is impossible to know the possible bugs after code deployment in real time. In order to solve these bugs afterwards, we spent a lot of time on log debugging. By the way, we recommend a good bug monitoring toolFundebug

Original text:https://ishadeed.com/article/…

communication

The article is updated every week. You can search “big move world” for the first time to read and urge the change (one or two articles earlier than the blog). This article is GitHubhttps://github.com/qq449245884/xiaozhiI have collected many documents and I have welcomed Star and perfect. You can review the test points and pay attention to the official account.welfareYou can see the benefits, you know.

Multiple CSS centring schemes you don't know!