How to center an element (final version)

Foreword

This article mainly introduces horizontal centering, vertical centering, and various methods for horizontal and vertical centering.

1. Horizontal center

1. Inline elements are centered horizontally

Use text-align: center to horizontally center inline elements inside block-level elements . This method is valid for horizontal centering of inline, inline-block, inline-table, and inline-flex elements.

.parent{//Set in the parent container
text-align:center;
}

In addition, if a block-level element is also enclosed within a block-level element, we can first change it from a block-level element to an inline block element, and then set the inline block element to center to achieve horizontal centering .

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent{
    text-align:center;  
  }
  .child {
    display: inline-block;
  }
</style>

2. Horizontal centering of block-level elements

This situation can be implemented in a number of ways, which we describe in detail below:

① Set the margin-left and margin-right of the left and right margins of the block-level element to auto

.child{
width: 100px;//Ensure the block-level element has a fixed width
margin:0 auto;
}

② Use table+margin

First set the child element as a block-level table to display (similar), and then set it to the horizontal center

display:table behaves like a block element, but is as wide as the content.

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

③ Use absolute+transform

First set the parent element to relative positioning, then set the child element to absolute positioning, move the child element to the right, half the distance of the parent container, and finally move the child element to the left by half the width to achieve horizontal centering.

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }

  .parent {
    position:relative;
  }
</style>

However, transform belongs to css3 content, and there are certain compatibility problems. High-version browsers need to add some prefixes .

④ Use flex+justify-content

Horizontal centering is achieved through the justify-content property in flex, a layout tool in CSS3.

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
    justify-content:center;
  }
</style>

⑤ Use flex+margin

Set the parent container to a flex layout through flex, and then set the child element to center.

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
  }
  .child {
    margin:0 auto;
  }
</style>

3. Multi-block-level elements are centered horizontally

① Using flex layout

Use flexible layout (flex) to achieve horizontal centering, where justify-content is used to set the alignment of the flexbox element in the main axis (default horizontal axis) direction. In this example, the child elements are set to be centered horizontally.

 #container {
    display: flex;
    justify-content: center;
}

② Using inline-block

Set the block element to be aligned horizontally to display:inline-block, and then set text-align:center on the parent element to achieve the same effect as the horizontal centering of the inline element above .

.container {
text-align: center;
}

.inline-block {
display: inline-block;
}

4. Center the floating element horizontally

For fixed-width floating elements, set relative + negative margin through child elements
For floating elements of variable width, both parent and child containers use relative positioning
Common method (whether fixed width or variable width): flex layout

① Fixed-width non-floating elements

Set relative + negative margin through child elements, the principle is shown in the following figure:

Note: The styles are set on the floated element itself

.child {
position:relative;
left:50%;
margin-left:-250px;
}

<div class="parent">
<span class="child" style="float: left;width: 500px;">I am the floating element to be centered</span>
</div>

② Floating elements with variable width

Both the parent and child containers are positioned relatively, and the offset displacement is shown in the following figure: Note: To clear the float, add float to the outer element. The parent element here is the outer element

<div class="box">
<p>I am floating</p>
<p>I am also centered</p>
</div>

.box{
float:left;
position:relative;
left:50%;
}

p{
float:left;
position:relative;
right: 50%;
}

③ General method flex layout (whether it is fixed width or variable width)

Use the properties of flexible layout (flex) to justify-contentachieve horizontal centering .

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

.chlid{
float: left;
width: 200px;//Whether there is width does not affect centering
}

<div class="parent">
<span class="chlid">I am the floating element to be centered</span>
</div>

5. Absolutely positioned elements are centered horizontally

This method is very unique, and is achieved by absolute positioning of child elements, plus margin: 0 auto.

<div class="parent">
<div class="child"> Center aligns absolutely positioned elements horizontally. </div>
</div>

.parent{
position:relative;
} 

.child{
position: absolute; /*absolute positioning*/
width: 200px;
height:100px;
background: yellow;
Margin: 0 auto; /*Center horizontally*/
left: 0; /*It cannot be omitted here and is 0*/
right: 0;/*This cannot be omitted and is 0*/
}

2. Vertical centering

1. Vertical centering of single-line inline elements

<div id="box">
<span> A single-line inline element is vertically centered. </span>.
</div>
<style>

#box {
height: 120px;
line-height: 120px;
border: 2px dashed #f69c55;
} 
</style>

2. Multi-line inline elements are vertically centered

① Using flex layout (flex)

Use flex layout to achieve vertical centering, where flex-direction: column defines the main axis direction as vertical . This approach has compatibility issues with older browsers.

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>

<style>
    .parent {
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

② Using the table layout (table)

Use vertical-align: middle of table layout to achieve vertical centering of child elements

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>

 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }

    .child {
        display: table-cell;
        vertical-align: middle;
    }

</style>

3 block-level elements are vertically centered

① Use absolute+negative margin (known height and width)

This is done by absolutely positioning the element 50% from the top and setting margin-top to offset half the element's height upwards .

<div class="parent">
<div class="child"> Fixed-height block-level elements are vertically centered. </div>
</div>
.parent {
position: relative;
}

.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

② Use absolute+transform

When the height and width of the vertically centered element are unknown, vertical centering can be achieved by offsetting 50% of the Y-axis in the reverse direction of the Y-axis with the help of the transform property in CSS3 . But some browsers have compatibility issues.

<div class="parent">
<div class="child"> Block-level elements of unknown height are vertically centered. </div>
</div>

.parent {
position: relative;
}

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

③ Use flex+align-items

By setting the property align-items in the flex layout, the child elements are vertically centered .

<div class="parent">
<div class="child"> Block-level elements of unknown height are vertically centered. </div>
</div>

.parent {
display:flex;
align-items:center;
}

④ Using table-cell+vertical-align

By converting the parent element into a table cell display (similar to <td> and <th>), and then by setting the vertical-align property , the table cell content is vertically centered.

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

Three, horizontal and vertical centering

There are also many ways to implement this situation. Next, we will explain:

Method 1: Absolute positioning and negative margin implementation (known height and width)

This method needs to know the height and width of the vertically centered element in order to calculate the margin value, which is compatible with all browsers .

// css part
#container {
position: relative;
} 

#center {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}

// html part (this part does not change, the following examples are directly shared)
<body>
<div id='container'>
<div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
</body>

Method 2: Absolute positioning and margin:auto (known height and width)

This method does not need to know the height and width of the vertically centered element, but it is not compatible with lower versions of IE browsers.

#container {
position: relative;
height: 100px;//There must be a height
} 

#center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Margin: auto;//Pay attention to the writing here

} }

Method 3: Absolute positioning + CSS3 (unknown element height and width)

Using the transform of Css3, you can easily achieve vertical centering of elements without knowing the height and width of elements .

The transform of CSS3 is easy to use, but compatibility issues must be considered in the actual application of the project. A large number of hack codes may lead to more losses than gains.

 #container {
      position: relative;
    }

  #center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

Method 4: flex layout

Use flex layout, where justify-content is used to set or retrieve the alignment of the flex box element in the main axis (horizontal axis) direction; and the align-items property defines the side axis (vertical axis) of the flex child in the current row of the flex container. Alignment in the direction. Not compatible with lower versions of IE browsers.

#container {//You can set it directly in the parent container
height: 100vh;//Must have height
display: flex;
justify-content: center;
align-items: center;
}

Method 5: flex/grid and margin:auto (the simplest way to write)

The container element is set to flex layout or grid layout, and the child element only needs to write margin: auto, which is not compatible with lower versions of IE browsers.

#container {
height: 100vh;//Must have height
display: grid;
} 

#center {
margin: auto;
}

If you think the article is a little helpful to you, please like and follow my GitHub blog , thank you very much!

postscript

Writing a blog is a very labor-intensive thing, especially if you have the original intention of writing a good blog. It took more than five or six hours before and after this article, but I often enjoy it! On the one hand, I read a lot of blogs, and I don’t feel like I have mastered it without manually sorting it out; on the other hand, sharing my learning experience is a very happy thing, and I am willing to grow and progress together with you! If you think this article is good, remember to like and follow! Because often ordinary people need the encouragement and support of others the most!

ES6 iterators and generators What you must know about responsive layouts

Blogs

Programming

Frameworks