简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der Elementzentrierung in CSS

Zusammenfassung der Elementzentrierung in CSS

WBOY
WBOYOriginal
2016-09-29 09:19:071086Durchsuche

Oft müssen wir die Elemente zentrieren: 1. Ein Textstück horizontal zentrieren, 2. Ein Bild horizontal zentrieren, 3. Ein Element auf Blockebene horizontal zentrieren, 4. Eine einzelne Textzeile vertikal zentrieren; 6. Ein Textstück mit einer unbestimmten Höhe wird vertikal zentriert, 6. Ein Element auf Blockebene mit einer bestimmten Höhe wird vertikal zentriert und so weiter. Fassen wir sie nun separat zusammen (dieser Artikel wurde auch in imooc veröffentlicht, ist aber aufgrund des Formats nicht einfach zu lesen):

1. Um das Element horizontal zu zentrieren, verwenden Sie text-align: center;

<span style="color: #800000;"><div class="text-center">水平居中</div>        

.text-center </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;"> 让文本水平居中 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}

2. Zentrieren Sie das Bild horizontal und verwenden Sie text-align: center;

für das übergeordnete Element 
<span style="color: #800000;"><div class="img-center">
    <img src="fenjing.jpg" alt="Zusammenfassung der Elementzentrierung in CSS">
</div>    

.img-center </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>; /* 让图片水平居中 */<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}

Anleitung:

Bilder sind Inline-Elemente. Zu Beginn meines Videolernens schien ein Lehrer gesagt zu haben, dass Bilder Inline-Block-Elemente sind (Inline-Block). ; stellt es horizontal in der Mitte dar und kann auch die Breite und Höhe einstellen. Daran habe ich schon lange nicht mehr gezweifelt! Später verliebte ich mich in die „Rückverfolgung zum Ursprung“ und stellte fest, dass dies nicht der Fall war:

Der Standardanzeigemodus für img in dh Edge, Chrome, Firefox und Opera ist: display: inline;

dh:

Kante:

Chrom:

Firefox:

Oper:

Img ist inline, was wie Text einfacher zu erkennen ist und über text-align: center; auf horizontale Zentrierung eingestellt werden kann

3. Um Elemente auf Blockebene horizontal zu zentrieren, verwenden Sie margin-right: auto; margin-left: auto; 

<span style="color: #800000;"><div class="parent-box">
    <div class="child-box">块级元素水平居中</div>
</div> 

.parent-box </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f98</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> auto</span>;
}

4. Zentrieren Sie eine einzelne Textzeile vertikal, sodass Zeilenhöhe und Höhe gleich sind. 

<span style="color: #800000;"><div class="text-middle">单行文本竖直居中</div>
 
.text-middle </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;
}

Hinweis: Die hier erwähnte Höhe und Zeilenhöhe sind gleich, es gibt einen Hinweis:

Bei box-sizing: content-box; (dies ist auch der Standardwert). Stellen Sie einfach die Werte von height und line-height auf den gleichen Wert ein. Bei box-sizing: border-box; sollte der Wert von line-height von der Höhe durch padding-top, padding-bottom und border-top abgezogen werden , Rahmen – Die vier unteren Werte

entsprechen der effektiven Höhe, die dem Inhalt zugewiesen ist.

5. Ein Textstück mit unsicherer Höhe ist hier nicht anwendbar. padding-top: ...; gleicher Wert. 

<span style="color: #800000;"><div class="text-middle-padding">不确定高度的一段文本竖直居中</div> 

.text-middle-padding </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
    padding-top</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    padding-bottom</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}

Erklärung: Wie kann der Text für ein Element mit einer bestimmten Höhe und einer unbestimmten Anzahl an Textzeilen vertikal zentriert werden? Wird später erwähnt.

6. Um die Höhe des Elements auf Blockebene zu bestimmen, verwenden Sie position: absolute; top: 50 %; eigene Größe) ; 

<span style="color: #800000;"><div class="parent-box">
    <div class="child-box">确定高度的块级元素竖直居中</div>
</div> 

.parent-box </span>{<span style="color: #ff0000;">
　　position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
　　width</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
　　height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
　　background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -50px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}

7. Um eine horizontale und vertikale Zentrierung mit absoluter Positionierung zu erreichen, verwenden Sie position: absolute;

说明：对于块儿级元素的垂直居中，推荐这么做，这也是我比较喜欢的方法。

需要注意的地方是，对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。如果只需要垂直居中，right: 0; 和 left: 0; 可以省略不写，margin: auto; 可以换成 margin-top: auto; margin-bottom: auto;；如果只需要水平居中，top: 0; bottom: 0; 可以省略不写,margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto; 。

 8. 平移实现水平垂直居中法：通过使用 transform: translate(-50%,-50%); 添加厂商前缀 -webkit- 兼容 Safari 和 Chrome

<span style="color: #800000;"><div class="parent-box">
    <div class="child-box">平移实现水平垂直居中法</div>
</div> 

.parent-box </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f54</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate(-50%,-50%)</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> translate(-50%,-50%)</span>;
}

 9. 让浏览器计算子元素的宽高并让其水平垂直居中：通过使用定位position: absolute; top:...; right: ...; bottom: ...; left: ...; 四个方向上的值缺一不可。

<span style="color: #800000;"><div class="parent-box">
    <div class="child-box">让浏览器计算子元素的宽高并让其水平垂直居中</div>
</div> 

.parent-box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
    bottom</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}

对于子元素，上下左右的定位值可以用 px 作为单位，也可以用 % 作为单位。

 10. css3伸缩布局实现元素水平垂直居中，通过使用 display:flex;  align-items: center;  justify-content: center;

<span style="color: #800000;"><div class="parent-box">
    <div class="child-box">我是子元素，这里使用了 css3 的弹性伸缩布局</div>
</div>

.parent-box </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
    justify-content</span>:<span style="color: #0000ff;"> center</span>; /* 让子元素水平居中 */<span style="color: #ff0000;">
    align-items</span>:<span style="color: #0000ff;"> center</span>; /* 让子元素垂直居中 */<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #999</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fe5454</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;
}

说明：

ie 10 及以上版本浏览器支持，chrome, firefox, opera, edge 均支持，不需要添加厂商前缀。

另外：这里也解释了第5点中“对于高度确定的元素，它的文本的行数不确定的情况下，怎么让文本垂直居中呢？”的问题，使用这里提到的 css3 弹性布局方式。对付元素使用 display: flex; justify-content: center; align-items: center; 来解决。

注意：

1. 如果不添加 justify-content: center; 子元素不会水平居中；

2. 如果不添加 align-items: center; 子元素会铺满父元素的高度，而不是我们希望的只有包含住文本的高度！

记忆方法：

我们知道：text-align: justify; 能将文本按照两端对其的方式对文本进行布局，这个处理的是水平方向上的问题。联想记忆，justify-content 也是处理水平方向上的事情，所以 justify-contnet: center; 就是让元素水平居中了。

扩展：

需求：我们经常做分页时，需要将分页的列表项置于水平居中的位置，就像下面的 dom 一样：

<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">«</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">»</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>      </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

解决方法：

可以为父元素 ul 添加 text-align: center; 同时给子元素 li 添加 display: inline-block;

完整的代码：

<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">«</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">»</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="color: #800000;">ul.pagination </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0</span>; /* 设置 font-size 的大小为 0，目的是让显示方式为 inline-block 的子元素去除外边距(外边距是由于 html 的空格所导致的) */
}<span style="color: #800000;">
ul.pagination li </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>; }<span style="color: #800000;">
ul.pagination li a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 7px 14px</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;"> 1px 0 1px 1px</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #f1f2f3</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 15px</span>;  /* 这里一定要设置 font-size，别指望去继承了，因为如果不设置，将会继承 ul 的大小 0 */<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> all .3s ease 0</span>;
}<span style="color: #800000;">
ul.pagination li:first-child a </span>{<span style="color: #ff0000;">
    border-top-left-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-bottom-left-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">
ul.pagination li:last-child a </span>{<span style="color: #ff0000;">
    border-right</span>:<span style="color: #0000ff;"> 1px solid #f1f2f3</span>;<span style="color: #ff0000;">
    border-top-right-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-bottom-right-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">
ul.pagination li a:hover </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fe5454</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #fe5454</span>;
}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：In SVGNächster Artikel：In SVG

In Verbindung stehende Artikel

Mehr sehen