Some methods to achieve horizontal centering/vertical centering with css

This article summarizes some methods of using CSS to achieve horizontal centering/vertical centering. The tutorials are very basic. I hope it will be helpful to everyone!

1. Horizontal centering

##1. text-align:center (Inline element)

##　Set the attribute text-align:center;# to its parent element

#2. margin: 0 auto(Block-level element)##　

Set margin to the element itself: 0 auto;

3. The width of the element is fixed

　1⃣️ position+margin-left

.ele{
    position:absolute;
    width:固定;
    left:50%;
    margin-left:-0.5宽度;
}

　2⃣️ position+left:0;right:0;margin:0 auto

.ele{
    position:absolute;
    width:固定;
    left:0;
    right:0;
    margin:0 auto;
}

4. The width of the element is not fixed

##　1⃣️css3-transform

.ele{
    position:absolute;
      left:50%;
      transform:translate(-50%,0);
}

## 　2⃣️css3-width:fit-content(When the element that needs to be centered is set to float:left, you can Set the following attributes to the parent element of the element)

##

<span style="color: #000000">.ele-parent{
      width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}<br>该属性目前只支持Chrome 和 Firefox浏览器.</span>

　

3⃣️flex

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

2. Vertical centering

1. line-height:eleparent-height

The vertical centering attribute of a single line of text can be set line-height:parent element height

2. The height of the element is fixed

##　1⃣️position＋margin-top

.ele-parent{
    position:relative;
}
.ele{
    position:absolute;
    top:50%;
    height:固定;
    margin-top:-0.5高度;
}

　2⃣️ position+top:0;bottom:0;margin:auto 0

.ele{
    position:absolute;
    height:固定;
    top:0;
    bottom:0;
    margin:auto 0;
}

3. The height of the element is not fixed

##　1⃣️vertical-align

<span style="color: #000000">.ele-parent{
    display:table;
}
.ele{
    display:table-cell;<br>　　vertical-align:middle;
}</span><strong><span style="font-size: 16px">　　　　</span></strong>

# 　2⃣️css3-transform

.ele{
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
}

3⃣️flex

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

　Only sorted out for now Please criticize and correct any shortcomings in these! ! !

　

The above is the detailed content of Some methods to achieve horizontal centering/vertical centering with css. For more information, please follow other related articles on the PHP Chinese website!