Explication détaillée du code de huit façons d'obtenir le centrage avec le positionnement absolu CSS

Les éléments positionnés de manière absolue ne sont pas rendus dans le flux de contenu normal, donc margin:auto peut centrer le contenu verticalement dans les limites définies par top: 0; bottom: 0;.

Méthode de centrage :

1. Dans le conteneur

Le conteneur parent du bloc de contenu est défini sur position:relative. Utilisez la méthode de centrage absolu ci-dessus pour centrer le contenu affiché. dans le conteneur parent.

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Les démos restantes ci-dessous incluent par défaut les styles CSS ci-dessus. Sur cette base, seules les classes supplémentaires sont fournies aux utilisateurs pour qu'ils puissent les ajouter pour obtenir différentes fonctions.

2. Dans la fenêtre d'affichage

Vous souhaitez que le bloc de contenu reste dans la zone visible ? Définissez le bloc de contenu sur position:fixed; et définissez une valeur de propriété d'empilement z-index plus grande.

.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

Remarque : Pour Mobile Safari, si le bloc de contenu n'est pas placé dans un conteneur parent défini sur position:relative;, le bloc de contenu sera centré verticalement dans l'ensemble du document au lieu d'être centré verticalement dans le zone visible.

3. Barre latérale (décalages)

Si vous souhaitez définir un en-tête fixe ou ajouter d'autres barres latérales, il vous suffit d'ajouter un code de style CSS comme celui-ci au style du bloc de contenu : top :70px;bottom:auto;Depuis que margin:auto; a été déclaré, le bloc de contenu sera centré verticalement dans le cadre de délimitation que vous définissez via les propriétés top, left, bottom et right.

Vous pouvez épingler le bloc de contenu sur le côté gauche ou droit de l'écran et garder le bloc de contenu centré verticalement. Utilisez right:0;left:auto; pour fixer sur le côté droit de l'écran, et left:0;right:auto; pour fixer sur le côté gauche de l'écran.

.Absolute-Center.is-Right {
  left: auto; right: 20px;
  text-align: right;
}

.Absolute-Center.is-Left {
  right: auto; left: 20px;
  text-align: left;
}

4. Réactif/Adaptatif (Réactif)

Le plus grand avantage du centrage absolu devrait être sa prise en charge parfaite du pourcentage de largeur et de hauteur. Même les attributs min-width/max-width et min-height/max-height se comportent comme prévu dans la boîte adaptative.

.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

L'ajout d'un remplissage à l'élément de bloc de contenu n'affectera pas le centrage absolu de l'élément de bloc de contenu.

5. Débordement (Overflow)

Si la hauteur du contenu est supérieure à l'élément de bloc ou au conteneur (fenêtre d'affichage ou conteneur parent défini sur position:relative), il débordera. temps, le contenu peut être affiché en dehors du bloc et du conteneur, ou étant tronqué, l'affichage est incomplet (correspondant à la performance lorsque l'attribut de débordement du bloc de contenu est respectivement défini sur visible et masqué).

Ajout d'un débordement : auto affichera les barres de défilement du bloc de contenu sans franchir la limite lorsque la hauteur du contenu dépasse la hauteur du conteneur.

.Absolute-Center.is-Overflow {
  overflow: auto;
}

Si le bloc de contenu lui-même ne définit aucun remplissage, vous pouvez définir max-height : 100 % ; pour garantir que la hauteur du contenu ne dépasse pas la hauteur du conteneur.

6. Redimensionnement

Vous pouvez utiliser d'autres classes ou du code javascript pour redessiner le bloc de contenu tout en vous assurant qu'il est centré, sans avoir à recalculer manuellement la taille centrale. Bien entendu, vous pouvez également ajouter l'attribut resize pour permettre aux utilisateurs de glisser-déposer le bloc de contenu pour le redessiner.

Le centrage absolu peut garantir que le bloc de contenu est toujours centré, que le bloc de contenu soit redessiné ou non. Vous pouvez limiter la taille du bloc de contenu en fonction de vos besoins en définissant min-/max- et empêcher le contenu de déborder de la fenêtre/du conteneur.

.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
}

Si vous n'utilisez pas l'attribut resize:both, vous pouvez utiliser la transition de l'attribut d'animation CSS3 pour obtenir une transition en douceur entre les fenêtres redessinées. Assurez-vous de définir overflow:auto; pour éviter que la taille du bloc de contenu redessiné ne soit inférieure à la taille réelle du contenu.

Absolute Centering est la seule technologie qui prend en charge l'attribut resize:both pour obtenir un centrage vertical.

Remarque :

1. Il est nécessaire de définir les attributs max-width/max-height pour compenser le remplissage du bloc de contenu, sinon il risque de déborder.

2. Les navigateurs mobiles et les navigateurs IE8-IE10 ne prennent pas en charge l'attribut de redimensionnement, donc si cette partie de l'expérience utilisateur est nécessaire pour vous, assurez-vous que le redimensionnement est réalisable pour vos utilisateurs. . retraite.

3. L'utilisation conjointe des attributs de redimensionnement et de transition générera un délai d'animation de transition lorsque l'utilisateur redessinera.

7. Images

Le centrage absolu s'applique également aux images. Appliquez une classe ou un style CSS à l'image elle-même et ajoutez le style height:auto à l'image. L'image sera affichée de manière adaptative au centre. Si le conteneur extérieur peut être redimensionné, au fur et à mesure que le conteneur est redessiné, l'image sera. redessiné en conséquence et reste toujours centré.

Il est à noter que bien que height:auto soit utile pour centrer l'image, si height:auto est appliqué au bloc de contenu externe de l'image, cela posera quelques problèmes : le bloc de contenu normal sera étiré et rempli tout le récipient. À l'heure actuelle, nous pouvons utiliser une hauteur variable (Variable Height) pour résoudre ce problème. La cause du problème peut être que la hauteur de l'image doit être calculée lors du rendu de l'image. C'est comme si vous définissiez vous-même la hauteur de l'image, une fois que le navigateur aura obtenu la hauteur de l'image, il n'analysera pas margin:auto et ne la centrera pas verticalement. comme d'autres situations. Nous ferions donc mieux d'appliquer ces styles à l'image elle-même plutôt qu'à l'élément parent.

HTML :

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS :

.Absolute-Center.is-Image {
  height: auto;
}

.Absolute-Center.is-Image img { 
  width: 100%;
  height: auto;
}

8. Hauteur variable (Hauteur variable)

这种情况下实现绝对居中（AbsoluteCentering）必须要声明一个高度，不管你是基于百分比的高度还是通过max-height控制的高度，还有，别忘了设置合适的overflow属性。对自适应/响应式情景，这种方法很不错。

与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高，内容块都会保持居中。这种方法在一些浏览器（如IE/FireFox）上会有问题，我的搭档Kalley

在ELL Creative（访问ellcreative.com ）上写了一个基于Modernizr插件的检测函数，用来检测浏览器是否支持这种居中方法，进一步增强用户体验。

Javascript：

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});

CSS：

.absolutecentercontent .Absolute-Center.is-Variable {
  display: table;
  height: auto;
}

浏览器兼容性不太好，若Modernizr不能满足你的需求，你需要寻找其他方法解决。

1.      与上述重绘(Resizing)情况的方法不兼容

2.      Firefox/IE8:使用display:table会使内容块垂直居上，不过水平还是居中的。

3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

4.      Mobile Safari:内容块垂直居中；若使用百分比宽度，水平方向居中会稍微偏离中心位置。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!