居中布局的整理
(1)水平居中
- 行内元素:text-align:center
- 块级元素:margin: 0 auto
- display:flex; justify-content:center;
- absolute + transform
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>居中对齐</title>
<style>
.customDiv {
width: 500px;
height: 500px;
border: 1px solid red;
text-align: center;
}
.customDiv .imgCus {
width: 200px;
height: 200px;
}
.div1 {
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
.div1 .img1 {
width: 100px;
height: 100px;
position: absolute;
/* top: 50%; */
left: 50%;
transform: translate(-50%, 0);
/* transform: translate(-50%, -50%); */
}
</style>
</head>
<body>
<div class="customDiv">
<span>居中对齐,居中对齐,居中对齐</span>
<!-- <img class="imgCus" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551244511903&di=6a8301bd7de1b7d86b9ec83e7c507d13&imgtype=0&src=http%3A%2F%2Fi4.hexunimg.cn%2F2016-10-11%2F186368488.jpg"/> -->
</div>
<div class="div1">
<img class="img1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551244511903&di=6a8301bd7de1b7d86b9ec83e7c507d13&imgtype=0&src=http%3A%2F%2Fi4.hexunimg.cn%2F2016-10-11%2F186368488.jpg"/>
</div>
</body>
</html>
/*
span,img 是行内元素,使用 text-align: center;可以实现水平的居中;
把img设置为块级元素,可以通过margin: 0 auto 实现水平居中;
div 设置为flex;display:flex; justify-content:center;
div:position:relpative .img: position:absolute; top:0; left:50%; transform:translate(-50% 0)
margin-left: -50px;
top,left跟根据父元素的宽和高偏移的,而transform: translate(-50%, -50%);是根据自身的宽高偏移的。
不使用transform 的也可以使用margin-left:-子元素的宽度
注释:img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素
行内非替换元素,例如span, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度
.customDiv .imgCus {
width: 200px;
height: 200px;
display:block;
margin: 0 auto;
}
.customDiv {
width: 500px;
height: 500px;
display:flex;
justify-content:center;
}
*/
(2)垂直居中
- line-height:height
- absolute+transform
- flex+align-items:center
<div class="div2">
<span lass="imgCus">fjafkjasjfalsdkfj fjalsdfj fajfj fadsjkfl jfdajkflj fadjk </span>
</div>
.div2 {
width: 400px;
height: 400px;
border: 1px solid red;
}
.div2 .imgCus {
display: inline-block;
height: 100px;
border: 1px solid green;
line-height: 100px;
}
/*
.div2 {
width: 400px;
height: 400px;
border: 1px solid red;
display:flex;
align-items:center;
}
*/
(3)水平垂直居中
- absolute+transform
- flex+justify-content:center+align-items:center