元素居中对齐方式很多种,这里整理了几种居中方式:
方式一: 知道父元素和子元素的宽高,通过padding、margin实现居中。
<style>
.box1{
width: 550px;
height: 300px;
background: yellow;
position: relative;
padding-top: 100px;
padding-left: 450px;
}
.child1{
width: 100px;
height: 200px;
background: red;
position: absolute;
}
</style>
<body>
<div class="box1">
<div class="child1"></div>
</div>
</body>
方式二: 不知道父元素的宽高,知道子元素的宽高,通过设置子元素的left、top,再设置margin-left、margin-top来实现居中
<style>
.box2{
width: 1000px;
height: 400px;
background: green;
position: relative;
}
.child2{
width: 100px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -100px;
}
</style>
<body>
<div class="box2">
<div class="child2"></div>
</div>
</body>
方式三: 不知道父元素和子元素的宽高,将子元素的left、right、top、bottom设为0,再设置margin为auto来实现居中
<style>
.box3{
width: 1000px;
height: 400px;
background: blue;
position: relative;
}
.child3{
width: 100px;
height: 200px;
background: red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div class="box3">
<div class="child3"></div>
</div>
</body>
方式四: 不知道父元素和子元素的宽高,将子元素的left、right设置为50%,再设置transform: translate(-50%,-50%),其中translate设置水平和垂直位置
<style>
.box4{
width: 1000px;
height: 400px;
background: green;
position: relative;
}
.child4{
width: 100px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="box4">
<div class="child4"></div>
</div>
</body>
方式五: 不知道父元素和子元素的宽高,不使用定位,设置父元素display:flex;子元素使用margin:auto;但是有个限制,只能有一个子元素
<style>
.box5{
width: 1000px;
height: 400px;
background: blue;
display: flex;
}
.child5{
width: 100px;
height: 200px;
background: red;
margin: auto;
}
</style>
<body>
<div class="box5">
<div class="child5"></div>
</div>
</body>
方式六:
vertical-align 垂直居中
- middle 居中
- top 顶部对齐
- bottom 底部对齐
- baseline 基线对齐
注意:只有行内块元素支持该属性
<style>
.box6{
width: 400px;
height: 400px;
background: cadetblue;
text-align: center;
}
.box6 span{
display: inline-block;
width: 0px;
height: 400px;
background: blueviolet;
vertical-align: middle;
}
.box6 img{
vertical-align: middle;
}
</style>
<body>
<div class="box6">
<span></span>
<img src="../images/photo01.jpg" alt="">
</div>
</body>