Lorsque le front-end implémente la page basée sur le prototype de page, c'est une question très courante de centrer la div horizontalement et verticalement. C'est aussi souvent demandé dans les interviews. Permettez-moi de partager avec vous comment centrer la div horizontalement et verticalement à l'aide de CSS , Javascript, jQuery et autres méthodes .
1. Méthode CSS :
Sept méthodes de CSS pour réaliser le centrage horizontal et vertical des divs sont le positionnement absolu et la valeur de marge négative, l'affichage : bloc en ligne, le positionnement absolu et la valeur de marge automatique, la transformation css et la méthode de positionnement absolu, la méthode css Flex, le bloc en ligne + vertical- méthode align+pseudo-classe, méthode table-cellule.
CSS réalise un alignement central vertical div, et un autre aspect à considérer est de savoir si l'élément a une largeur et une hauteur connues.
La largeur et la hauteur de l'élément sont connues
1. Positionnement absolu + valeur de marge négative (compatible avec tous les navigateurs)
1. Élément parent : position : relative ;
2. Élément enfant : position : absolue ; 50 % à partir du haut, 50 % à partir de la gauche et la hauteur à partir du haut et de la gauche correspond à la moitié de la hauteur négative.
<style type="text/css">
.fatherBox{
width: 100%;
height:100%;
position: relative;
background:#ddd;
}
.childBox{
width: 200px;
height: 200px;
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /*--上边距等于负的高度的一半值--*/
margin-left: -100px; /*--左边距等于负的宽度的一半值--*/
}
</style>
<body>
<div class="fatherBox">
<div class="childBox"></div>
</div>
</body>
2. bloc en ligne (bonne compatibilité, cette méthode est très utile sur les petits éléments, comme le centrage du texte du bouton ou du texte sur une seule ligne, et la largeur et la hauteur de l'élément sont connues)
1. Élément parent : ajoutez un style text-align: center à son conteneur parent et définissez la hauteur de ligne sur la hauteur de l'élément parent.
2. Sous-éléments (plusieurs sous-éléments) : display : inline-block ; définissez les sous-éléments comme des éléments de bloc en ligne, de sorte qu'ils soient tous alignés.
<style>
.fatherBox{
width: 500px;
height: 500px;
background-color: #FFAD41;
text-align: center;
line-height: 500px;
}
.childBox{
width: 100px;
height: 100px;
background-color: #F86F14;
display: inline-block;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox"></div>
<div class="childBox"></div>
<div class="childBox"></div>
</div>
</body>
Largeur et hauteur d'élément inconnues
1. Positionnement absolu haut et bas gauche et droite 0+marge : auto
1. Élément parent : définir la position de positionnement relative : relative.
2. Éléments enfants : Définir la position de positionnement absolue : absolu. Définir la distance entre le haut, le bas, la gauche et la droite sur 0. La marge est définie sur automatique.
<style>
.fatherBox {
width:100%;
height: 100%;
background: salmon;
position: relative;
}
.childBox{
width: 200px;
height: 200px;
border: 1px solid green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox"></div>
</div>
</body>
2. Poste + transformation
1. Élément parent : position : relative ;
2. Élément enfant : position : absolue ; 50 % à partir du haut, 50 % à partir de la gauche et le décalage de l'élément par rapport à lui-même est négatif de 50 %.
(Mauvaise compatibilité, supporte les navigateurs IE9+)
<style>
.fatherBox{
width:100%;
height: 100%;
background: salmon;
position: relative;
}
.childBox{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
<body>
<div class =“fatherBox”>
<div class =“childBox”> position + transform </ div>
</div>
</body>
disposition 3.flex
1. Élément parent : set display : flex ; justification-contenu : centre ;
align-items : centre ;
<style>
.fatherBox{
width: 500px;
height: 500px;
background-color: #FFAD41;
display: flex;
justify-content: center;
align-items: center;
}
.childBox{
background-color: #F86F14;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox">flex布局</div>
</div>
</body>
4. implémentation de bloc en ligne + alignement vertical + pseudo-classe
<style>
.fatherBox{
width: 500px;
height: 500px;
vertical-align:center;
background-color: #FFAD41;
}
.fatherBox:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.childBox{
display:inline-block;
vertical-align:middle;
width: 100px;
height: 100px;
background-color: #F86F14;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox">inline-block+vertical-align+伪类实现</div>
</div>
</body>
5.table-cellule
1. La table-cell est équivalente au td du tableau, et le td est un élément en ligne, et la largeur et la hauteur ne peuvent pas être définies, donc une couche d'imbrication doit être définie pour afficher : bloc en ligne ;. Non recommandé. (ie8 et ci-dessous ne sont pas pris en charge)
<style>
.fatherBox{
background-color: #FF8C00;
width: 100%;
height:100%;
display: table;
}
.childBox{
background-color: #DEB1F8;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.childTd {
background-color: #F5B9F0;
display: inline-block;
width: 20%;
height: 20%;
}
</style>
<body>
<div class="father fatherBox">
<div class="child childBox">
<div class="childTd"></div>
</div>
</div>
</body>
2. Méthode Javascript :
<script type="text/javascript">
//->获取当前屏幕的宽度和高度
var winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight;
//->获取盒子的宽度和高度
var box = document.getElementById("box"),
boxW = box.offsetWidth,
boxH = box.offsetHeight;
box.style.position = "absolute";
box.style.left = (winW - boxW) / 2 + "px";
box.style.top = (winH - boxH) / 2 + "px";
</script>
Troisièmement, jQuery réalise un centrage horizontal et vertical
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
});
});
//初始化函数
$(window).resize();