Detailed explanation of the advantages and disadvantages of several techniques for implementing centered styles in css

Negative Margins

This is perhaps the most popular method of use. If the size of the block element is known, you can center the content block in the container in the following way:

The outer margin is a negative number and the size is width/height (including padding when box-sizing: border-box is not used, ), plus top: 50%; left: 50%;. Namely:

.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

Testing shows that this is the only method that also performs well on IE6-IE7.

Advantages:

1. Good cross-browser features, compatible with IE6-IE7.

2. The amount of code is small.

Disadvantages:

1. It cannot be adaptive. Percent size and min-/max-property settings are not supported.

2. The content may overflow the container.

3. The size of the margin is related to padding and whether box-sizing: border-box is defined. The calculation needs to be based on different situations.

Transforms

This is the simplest method, which can achieve the same effect of absolute centering. It also supports the use of joint variable height. The content block definition transform: translate(-50%,-50%) must have the prefix of the browser manufacturer, and also add

top: 50%; left: 50%;

Code type:

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

Advantages:

1. Variable content height

2. Small amount of code

Disadvantages:

1 .      IE8 does not support

2.      Attributes need to write the browser manufacturer prefix

3.      May interfere with other transform effects

4.       Text or element boundaries may appear in some cases. The phenomenon of blurred rendering

To learn more about transform implementation and centering, please refer to the CSS-Tricks article "Centering PercentageWidth/Height Elements"

Table-Cell

Generally speaking, this may be the best way to achieve centering, because the height of the content block will change with the height of the actual content, and the browser's compatibility with this is also good. The biggest disadvantage is that it requires a lot of extra markup, requiring three layers of elements to center the innermost element.

HTML：

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>

CSS：

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}

Advantages:

1. Height variable

2. Content overflow will cause the parent Elements spread.

3. Good cross-browser compatibility.

Disadvantages:

Requires additional html tags

12. Inline-Block elements (Inline-Block)

Very popular A way to achieve centering. The basic idea is to use display: inline-block, vertical-align: middle and a pseudo element to put the content block in the center of the container.

If the width of the content block is greater than the width of the container, for example, if a very long text is placed, the width of the content block cannot be set to exceed 100% of the container minus 0.25em. Otherwise, if the pseudo element: after is used, the content block will be To squeeze to the top of the container, using :before the content block will be offset 100% downwards.

If your content block needs to occupy as much horizontal space as possible, you can use max-width: 99%; (for larger containers) or max-width: calc(100% -0.25em) ( Depends on supported browsers and container width).

HTML：

<div class="Center-Container is-Inline">  
  <div class="Center-Block">  
    <!-- CONTENT -->  
  </div>  
</div>

CSS：

.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: '';  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */   
}

The advantages and disadvantages of this method are similar to the Table-Cell method. At first I ignored this method because This is indeed a hack. However, this is a very popular usage and is well supported by browsers.

Advantages:

1. Variable height

2. Content overflow will expand the parent element.

3. Supports cross-browser and is also suitable for IE7.

Disadvantages:

1. Requires a container

2. Horizontal centering depends on margin-left: -0.25em; This size needs to be adjusted for different fonts/font sizes.

3. The width of the content block cannot exceed 100% of the container - 0.25em.

Flexbox

This is the future trend of CSS layout. Flexbox is a new attribute in CSS3. It was originally designed to solve common layout problems such as vertical centering. Remember that Flexbox is not only used for centering, but can also be used to divide columns or solve some crazy layout problems.

Advantages:

1. The width and height of the content block are arbitrary and can overflow gracefully.

2. Can be used in more complex and advanced layout techniques.

Disadvantages:

1. IE8/IE9 does not support it.

2. Body requires specific containers and CSS styles.

3. Code that runs on modern browsers requires the browser vendor prefix.

4. There may be some performance problems

Suggestion:

Each technology has its advantages and disadvantages. Which technology you choose depends on supported browsers and your coding. Use the comparison chart above to help you decide.

As a simple alternative, the Absolute Centering technique performs well. Where you once used Negative Margins, you can now use Absolute Centering instead. You no longer have to deal with annoying margin calculations and extra markup, and you can also have content blocks resized and centered.

If your site requires variable-height content, you can try the two methods of cell (Table-Cell) and inline-block elements (Inline-Block). If you're on the edge of bleeding edge, give Flexbox a try and experience the benefits of this advanced layout technology.

The above is the detailed content of Detailed explanation of the advantages and disadvantages of several techniques for implementing centered styles in css. For more information, please follow other related articles on the PHP Chinese website!