居中布局在平时的页面开发中十分常见,今个周日,特来总结一番,以备日后更加灵活的使用各种居中的方式。
首先准备元素:
<div class="parent">
<div class="child"></div>
</div>
1、水平居中
1)、margin:0 auto+设置width
.parent{width: 300px;height: 300px;border: 1px solid #ccc;}
.child{
width: 100px;height: 100px;background-color: red;
margin: 0 auto;
}
2)text-align:center,inline、inline-block元素有效
在父元素上设置。
**3)inline-block实现水平居中
.parent{
width: 200px;height: 200px;border: 1px solid red;
text-align: center;font-style: 0;letter-spacing: -4px;word-spacing: -4px;
}
.child{
width: 100px;height: 100px;background-color: red;
display: inline-block;letter-spacing: normal;word-spacing:normal;font-size: 14px;
}
2、绝对居中(即水平垂直都居中)
1)绝对定位+负margin值
需要设置元素的width、height
.parent{
position: relative;
width: 300px;height: 300px;border: 1px solid #ccc;
}
.child{
width: 100px;height: 100px;background-color: red;
position:absolute;top: 50%;left:50%;
margin: -50px 0 0 -50px;
}
image.png
2)绝对定位+margin:auto
.parent{
position: relative;
width: 300px;height: 300px;border: 1px solid #ccc;
}
.child{
width: 100px;height: 100px;background-color: red;
position:absolute;top: 0;bottom: 0;left:0;right: 0;
margin: auto;
}
3)绝对定位和transfrom
感觉bigger很高,下次我要使用看看效果如何
.parent{
position: relative;
width: 300px;height: 300px;border: 1px solid #ccc;
}
.child{
width: 100px;height: 100px;background-color: red;
position:absolute;top: 50%;left:50%;
transform: translate(-50%,-50%);
}
暂时经常用到的都写了,当然关于居中还有各种各样的奇淫巧技,日后有需要再补咯。
4)使用flex布局居中的方式
display:flex;
justify-content:center;
align-items:center;
网友评论