Besprechen Sie verschiedene Zentrierungsmethoden in CSS_CSS/HTML

Heute werden wir hauptsächlich über verschiedene Zentrierungsmethoden in CSS sprechen.
Die erste Möglichkeit besteht darin, horizontal zu zentrieren . Der einfachste Weg ist natürlich

Code 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.

Was ist mit anderen Möglichkeiten? Lassen Sie mich es Ihnen einzeln sagen:

Zeilenhöhe

Stellen Sie zunächst die horizontale Textzentrierungsmethode vor:

Code kopieren Der Code lautet wie folgt:

6bab83cd2ea3b0bfa059c0c27e19c040Liu Fang< ;/ div>

Verwenden Sie line-height, um es auf die Höhe einzustellen:

Code kopieren Der Code lautet wie folgt:

.wrap{
Zeilenhöhe: 200px;/*vertikaler Mittelschlüssel*/
text-align:center;

Höhe: 200px;
Schriftgröße: 36px;
Hintergrundfarbe: #ccc;
}

Der Effekt ist wie folgt:

Polsterung

Verwenden Sie Polsterung und Hintergrundclip, um eine horizontale und vertikale Zentrierung von Divs zu erreichen:

Code kopieren Der Code lautet wie folgt:

b428c3c18a70c3fd9550e96bb117dafa
6789779472ec455614b5679ffeb5bae316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Indem Sie „backgroun-clip“ auf „content-box“ setzen, schneiden Sie den Hintergrund auf den äußeren Rand des Inhaltsbereichs zu und setzen Sie ihn dann mithilfe von Padding auf die Hälfte der Differenz zwischen dem äußeren Div minus dem inneren Div:

.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:

Randpolsterung

Als nächstes stellen wir die Methode der Randfüllung vor, um eine horizontale und vertikale Zentrierung zu erreichen.
Zuerst definieren wir das Eltern-Kind-Div:

b428c3c18a70c3fd9550e96bb117dafa
6789779472ec455614b5679ffeb5bae316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Hier setzen wir den oberen Rand des untergeordneten Divs auf die Höhe des übergeordneten Divs minus der halben Höhe des untergeordneten Divs und setzen dann den Überlauf auf ausgeblendet, um den BFC des übergeordneten Divs auszulösen 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 und links 50 % und stellen Sie dann den Rand auf einen negativen Wert ein, um das Div horizontal und vertikal zu zentrieren. Zuerst müssen Sie noch die übergeordneten und untergeordneten Divs definieren:

Code kopieren Der Code lautet wie folgt:

b428c3c18a70c3fd9550e96bb117dafa
6789779472ec455614b5679ffeb5bae316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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 beträgt die Hälfte der Breite des Div. Die endgültige Darstellung ist:

Text zentriert ausrichten

Wie wir alle wissen, kann Text-Alignment den Inhalt in einem Div horizontal zentrieren. Aber was ist, wenn Sie das untergeordnete Div in diesem Div zentrieren möchten? Sie können die Anzeige des untergeordneten Div 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生效*/
}

图片居中

一般的图片居中都是和text-align一样，将图片包装在一个div中，将该div的text-align设为center即可。
可以参考下面的链接：
个人站点

有一种特殊的方式，利用了一个图片进行占位，以让父容器获得高宽，从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，IE6都是能顺利兼容的。代码如下：

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  e388a4556c0f65e1904146cc1a846bee
    dbe8b9bd8f9910749c751d9fd062a542
    5e4eb8fa85f3b4e9592f8a12d6aea5a194b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

.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%;
}

效果如下：

transform居中

上面讲到的div居中的例子中，div的宽度都是固定的，然而实际项目中，有可能遇到不定宽的div，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。
先上代码：

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  6789779472ec455614b5679ffeb5bae3
    c029628396f6f9ca1b5558ef22d8b6d9我是水平垂直居中噢！16b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

.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，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。
再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform : translate3d(0, -50%, 0);
这个方法非常好用噢。

flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

复制代码 代码如下:

b428c3c18a70c3fd9550e96bb117dafa
  6789779472ec455614b5679ffeb5bae3我是通过flex的水平垂直居中噢！16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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;
}

效果如下：

这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。

以上就是本文的全部内容，希望大家可以喜欢。