Several options for CSS centering (summary)

This article will introduce you to multiple CSS centering solutions. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

(Learning video sharing: css video tutorial)

Horizontal centering

Inline Elements

To center an inline element (such as a link, span or img), use text-align: center is enough.

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

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

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Flexbox

Using flexbox you can also quickly center elements:

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

It also works fine for multiple inline items:

CSS Grid

When using a grid container, the plates in the diagram will be centered based on their grid area. Note that this won't work with multiple plates unless you wrap them in a single element.

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

Block Element

Auto Margin

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

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

For multiple block elements, they should be wrapped in a single element and then have this parent element centered.

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

Flexbox

For flexbox, justify-content:center is also used to center the element:

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

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 center it horizontally via CSS transform.

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

When the width of the element is known, negative margins can be used instead of CSS transform.

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

Vertical Centering

Inline Element

Vertical Padding

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

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

Vertical Align

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

In this example, the fork and knife should be centered vertically on 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;
}

Block Element

Absolute Positioning

By absolutely positioning an element, you can use CSS

transform to center the element vertically:

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

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

transform.

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

CSS Grid

Using CSS Grid, we can center items vertically to their grid area using

align-items.

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

Horizontal and vertical centering

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

Flexbox

You can center the element vertically and horizontally through

justify-content:center and align-items:center:

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

CSS Grid

can be passed through the

place-items attribute, which combines justify-content and align -items:

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

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Several options for CSS centering (summary). For more information, please follow other related articles on the PHP Chinese website!