In diesem Artikel werden die verschiedenen Zentrierungsmethoden in CSS ausführlich erläutert und es gibt entsprechende Darstellungen.
Heute werden wir hauptsächlich über Verschiedenes sprechen Zentrierungsmethoden in CSS.
Die erste Möglichkeit besteht darin, horizontal zu zentrieren. Der einfachste Weg ist natürlich,
den Code zu kopieren Der Code lautet wie folgt:
margin:0 auto;
Das heißt, stellen Sie die Eigenschaften „margin-left“ und „margin-right“ auf „auto“ ein, um einen horizontalen Zentrierungseffekt zu erzielen.
Wie wäre es mit anderen Möglichkeiten? Lassen Sie mich sie einzeln erklären:
Zeilenhöhe
Stellen Sie zunächst die horizontale Zentrierungsmethode für Text vor:
Kopieren Sie den Code Der Code ist wie folgt:
Liu Fang
Verwenden Sie line-height, um es auf die Höhe einzustellen:
Code kopieren Der Code lautet wie folgt:
.wrap{
line-height: 200px;/*Vertical centering key*/
text-align:center;
Höhe: 200px;
Schriftgröße: 36px;
Hintergrundfarbe: #ccc;
}
Der Effekt ist wie folgt:
Padding Padding
Verwenden Sie Padding und Hintergrundclip, um die horizontale und vertikale Zentrierung von p zu erreichen:
Kopieren Sie den Code Der Code lautet wie folgt:
Setzen Sie den Hintergrundclip auf „Content-Box“ und stellen Sie „Crop the Background“ auf den äußeren Rand des Inhaltsbereichs ein. Stellen Sie ihn dann mithilfe von Padding auf die Hälfte der Differenz zwischen dem äußeren p minus dem inneren p ein, um dies zu erreichen :
.parent{
margin:0 auto;
width:200px;
height:200px;
background-color:red;
}
.children {
width: 100px;
height: 100px;
padding: 50px;
background-color: black;
background-clip:content-box;/*居中的关键*/Der Effekt ist wie folgt:
Randfüllung
Als nächstes stellen wir die Methode der Randfüllung vor, um eine horizontale und vertikale Zentrierung zu erreichen.
Zuerst definieren wir das übergeordnete und untergeordnete p:
Hier setzen wir den Rand oben des untergeordneten p auf die Höhe des übergeordneten p minus der halben Höhe des untergeordneten p und setzen dann den Überlauf auf ausgeblendet, um den BFC des auszulösen parent p. Der LESS-Code lautet wie folgt:
@parentWidth:200px;
@childrenWidth:50px;
.parent {
margin:0 auto;
height:@parentWidth;
width:@parentWidth;
background: red;
overflow:hidden;/*触发BFC*/
}
.children {
height:@childrenWidth;
width:@childrenWidth;
margin-left:auto;
margin-right:auto;
margin-top: (@parentWidth - @childrenWidth) / 2;
background:black;
}Der endgültige Zentrierungseffekt ist wie folgt:
absolute Positionierung
Verwenden Sie position:absolute mit oben, links 50 % und stellen Sie dann den Rand auf einen negativen Wert ein, um p horizontal und vertikal zu zentrieren. Zuerst müssen Sie noch das übergeordnete Element definieren und Kind p:
Code kopieren Der Code lautet wie folgt:
Dann legen Sie das entsprechende CSS fest:
.parent {
position:relative;
margin:0 auto;
width:200px;
height:200px;
background-color:red;
}
.children {
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -25px ;
height:50px;
width:50px;
background-color: black;
}Der Wert im Rand ist die Hälfte der p-Breite und das endgültige Rendering ist:
Text-Alignment Centered
Wie wir alle wissen, Text -align kann den Inhalt in einem p horizontal zentrieren. Aber was ist, wenn Sie das Sub-P in diesem P zentrieren möchten? Sie können die Anzeige von sub-p auf Inline-Block einstellen.
.parent {
text-align:center;
margin:0 auto;
width:200px;
height:200px;
background:red;
}
.children {
positiona;absolute;
margin-top:75px;
width:50px;
height:50px;
background: black;
display:inline-block;/*使其父元素text-align生效*/
}Bildzentrierung
Die allgemeine Bildzentrierung ist dasselbe wie die Textausrichtung, wobei das Bild nur in ein p eingeschlossen wird Setzen Sie die Textausrichtung von p auf zentriert.
Sie können auf den folgenden Link verweisen:
Persönliche Website
Es gibt eine spezielle Möglichkeit, ein Bild als Platzhalter zu verwenden, damit der übergeordnete Container die Höhe und Breite erhält, wodurch ein - 50 % Offset Bilder können einen Referenzcontainer für Prozentberechnungen haben. Der Vorteil besteht darin, dass Sie die Größe des Bildes nicht kennen und jedes Bild platzieren können, das die Größe des übergeordneten Containers nicht überschreitet, und es wird zentriert platziert. Darüber hinaus ist die Kompatibilität gut und IE6 ist problemlos kompatibel. Der Code lautet wie folgt:
Code kopieren Der Code lautet wie folgt:
.parent {
position:relative;
width:100%;
height:200px;
background:red;
}
p {
position:absolute;
top:50%;
left:50%;
}
.hidden-img {
visibility:hidden;
}
.show-img {
position:absolute;
right:50%;
bottom:50%;
}Die Wirkung ist wie folgt:
transform居中
上面讲到的p居中的例子中，p的宽度都是固定的，然而实际项目中，有可能遇到不定宽的p，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的p水平垂直居中方法。
先上代码：
复制代码 代码如下:
我是水平垂直居中噢！
.parent {
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.children {
float:left;
position:relative;
top:50%;
left:50%;
}
.children-inline {
position: relative;
left: -50%;
-webkit-transform : translate3d(0, -50%, 0);
transform : translate3d(0, -50%, 0);
background-color: black;
color:white;
}效果如下：
首先我们利用float，将需要居中的p的父p也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。
再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform : translate3d(0, -50%, 0);
这个方法非常好用噢。
flex居中
最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。
复制代码 代码如下:
我是通过flex的水平垂直居中噢！
html,body{
width: 100%;
height: 200px;
}
.parent {
display:flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
width:100%;
height:100%;
background-color:red;
}
.children {
background-color:blue;
}效果如下：
这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。
Das obige ist der detaillierte Inhalt vonZusammenfassung der Zentrierungsmethoden in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
