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:

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

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:

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:

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都是能顺利兼容的。代码如下：

复制代码 代码如下:

 

    http://nec.netease.com/img/s/1.jpg" alt="" />
    http://nec.netease.com/img/s/1.jpg" alt="" />

.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水平垂直居中方法。
先上代码：

复制代码 代码如下:

 

   

我是水平垂直居中噢！

 

.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来实现的水平垂直居中的方法。

复制代码 代码如下:

 

我是通过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;
}

效果如下：

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

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