Summary of various centered layout methods using CSS

This article summarizes various centering layout methods using CSS. Interested friends can refer to

This article discusses the situation where the centering situation is set to a variable total width and a variable content width. (Still centered when resized).

Special note: When setting position:absolute; on an element to set the centering effect, in addition to the css3 method introduced in the blog, you can also use negative margin to center. This solves the compatibility problem, but only Suitable for situations where the width and height are known (because a negative offset is half the width and height of the element). When the width and height change, there is no longer a centered effect.

Child elements in these layouts default to the content width because of their attribute settings.

All the centering examples in this article only discuss the implementation of css. The html code is unified as follows:

<p class="parent">   
    <p class="child">demo</p>   
</p>

1. Horizontal centering

1.1 inline-block with text-align

.parent{   
    text-align: center;   
}   
.child{   
    display: inline-block;   
}

##Advantages:The compatibility is very good. You only need to add *display:inline and *zoom:1 in the css of the child element to be compatible with IE6 and 7. Disadvantage: the internal text will also be horizontally centered, so the impact needs to be eliminated.

1.2 table with margin

.child{   
    display:table;   
    margin: 0 auto;   
}

Advantages: The setting is very simple, just set Set the sub-element, support IE8+, need to support IE6, 7, you can replace the sub-element into a table structure.

1.3 abasolute with transform

.parent{   
    position:relative;   
}   
.child{   
    position:absolute;   
    left:50%;   
    transform: translateX(-50%);   
}

Advantages: The centered element does not affect other elements . Disadvantages: CSS3 new attributes support IE9+, but lower version browsers do not support it.

2. Vertical centering

##2.1 table-cell with vertical-align

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

Advantages:

Easy to set up, just set the parent element, compatible with IE8+, when you need to be compatible with local browsers, you can replace p with a table structure.

2.2 absolute with transform

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

Advantages:

The centered element does not affect other elements . Disadvantages: CSS3 new attributes support IE9+, but lower version browsers do not support it. 3. Horizontal + vertical centering

3.1 inline-block with text-align plus table-cell with vertical-align

.parent{   
    display: table-cell;   
    vertical-align:middle;   
    text-align:center;   
}   
.child{   
    display: inline-block;   
}

Advantages:

Integrating the first two methods, the compatibility is good! Supports IE8+, and is also compatible with lower version browsers. Disadvantages: The setup is more complicated.

3.2 absolute with transform

.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    transform: translate(-50%,-50%);   
}

Advantages:

The centered element does not affect other elements . Disadvantages: CSS3 new attributes support IE9+, but lower version browsers do not support it.

4. Almighty flex

css3 adds new layout attributes. The layout is simple and powerful, but the performance is slightly worse. It only supports IE10+ and is mostly used on mobile terminals.

4.1 Horizontal centering

/*当父元素设置display: flex;时，子元素为flex-item，默认为内容宽度。*/  
.parent{   
    display: flex;   
    justify-content: center;   
}   
/* 在设置子元素为margin: 0 auto;时，可删除父元素的justify-content: center;同样可以达到居中效果*/  
/*  .child{
        margin: 0 auto;   
    }*/

4.2 Vertical centering

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

4.3 Horizontal and vertical centering

parent{       
    display: flex;       
    justify-content: center;       
    align-items: center;       
}       
/*如同flex布局的第一部分一样这里也可以对子元素进行下面的设置：同时删除上面的除去display外的其他属性*/      
/*  .child{   
        margin:auto;     
    } */

The above is the entire content of this article, I hope it will be helpful to Everyone’s learning helps.

The above is the detailed content of Summary of various centered layout methods using CSS. For more information, please follow other related articles on the PHP Chinese website!