preface

Centering elements is the most common and frequently used CSS technique in front-end development, not only in development, but also when interviewers ask questions about the basics. This paper mainly introduces the horizontal middle method. I hope there’s a team for both of us.

1.text-align: centerimplementation

If the parent element is a block-level element and contains inline elements, set the parent element to text-align: center. If the parent element is an inline element, the parent element cannot be set to width and height, so set it to block-level display: block. Horizontal center is also valid for inline, inline-block, inline-table, and inline-flex elements.

HTML

The parent element is the block-level element <div id="parent">
    <span id="child"> I am an inline element </span> </div> // parent element is an inline element <span id="parent">
    <span id="child"< span> </span>Copy the code

CSS

// The parent element is a block level element. Parent {height: 300px; width: 300px; text-align: center; background: skyblue; } // The parent element is the inline element. Parent {height: 300px; width: 300px; display: block; text-align: center; background: skyblue; }Copy the code

Effect:

2,margin: 0 aotoimplementation

Margin: 0 auto is used when the width is known to center the element horizontally.

HTML

<div id="parent">
    <div id="child"> I'm an inline element </div> </div>Copy the code

CSS

.parent {
  height: 300px;
  width: 400px;
  background:  #fcc;} .child { height: 100px; width: 100px; // Make sure that the block-level element has a fixed width background:#f66;
  margin: 0 auto;
}
Copy the code

Effect:

3, table+margin implementation

Display: Table behaves like a block element, but with the width of its content.

HTML

<div class="parent">
  <div class="child"> I am a block level element </div> </div>Copy the code

CSS

.parent {
  height: 300px;
  width: 400px;
  background:  #fcc;
}
.child {
  display: table;
  background: #f66;
  margin: 0 auto;
}
Copy the code

Effect:

Absolute +transform

First set the parent element to relative positioning, then set the child element to absolute positioning, first set the left of the child element :50%, and then center the child element horizontally by moving it half the width to the left.

  • Fixed width, set absolute child elementMargin-left :- half the width of the element pxOr settransform: translateX(-50%)
  • Variable width, only for usetransform: translateX(-50%)

HTML

<div class="parent">
    <div class="child"> I am a block level element </div> </div>Copy the code

CSS

.parent {
  height: 300px;
  width: 400px;
  position: relative;
  background:  #fcc;
}
.child {
  position: absolute;
  background: #f66;left: 50%; transform: translateX(-50%); Margin-left: 1px; margin-left: 1px; margin-left: 1px; Margin - left: - 50 px; }Copy the code

Effect:

5. Absolute +margin implementation

Margin: 0 Auto is implemented by absolute positioning of child elements.

HTML

<div class="parent">
    <div class="child"> I am a block level element </div> </div>Copy the code

CSS

.parent {
  height: 300px;
  width: 400px;
  position: relative;
  background:  #fcc;
}
.child {
  position: absolute;
  background: #f66;width: 200px; height: 100px; margin: 0 auto; /* horizontal center */ left: 0; /* right: 0; /* cannot be omitted, and is 0*/}Copy the code

Effect:

Flexbox implementation

With flexbox layout, you simply add attributes display: flex, justify-content: center to the parent of the block element to be processed

HTML

<div class="parent">
    <div class="child"> I am a block level element </div> </div>Copy the code

CSS

.parent {
  height: 300px;
  width: 400px;
  display: flex;
  justify-content: center;
  background:  #fcc;
}
.child {
  height: 100px;
  width: 100px;
  background: #f66;
}
Copy the code

Effect:

7. Flex +margin implementation

Use Flex to set the parent container to flex layout and center the child elements.

HTML

<div class="parent">
    <div class="child"> I am a block level element </div> </div>Copy the code

CSS

.parent {
  height: 300px;
  width: 400px;
  display: flex;
  background: #fcc;
}
.child {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  background: #f66;
}
Copy the code

Effect:

The last

If you like, welcome to collect attention.

More quality articles can be found hereGitHubBlog, welcome to Star!!

Refer to the article

  • How to center an element (Final)
  • Summary of methods of CSS horizontal center + Vertical center + horizontal/vertical center