元素居中
1、第一种办法
/*
Position:absolute;( 减号两要有空格)
水平居中:left:calc(50%-50px)
垂直居中:top:calc(50%-50px)
border<div></div>
*/
div {
width: 100px;
height: 100px;
border: 1px solid gray;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
border-radius: 10px 20px 30px 40px;
}
2、第二种办法
/* -水平居中:给 div 设置一个宽度,然后添加 margin:0 auto 属性 */
div {
width: 200px;
margin: 0 auto;
}
3、第三种办法
/* -水平居中,利用 text-align:center 实现 */
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
4、第四种办法
/* -让绝对定位的 div 居中 */
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}
5、第五种办法
-水平垂直居中一
/*
1、你父级没有定位时,相对于浏览器定位居中
2、相对于最近有定位的父级(position: relative/absolute)定位居中
*/
/*确定要定位的容器的宽高宽500高300的层设置层的外边距*/
div {
position: absolute; /*绝对定位*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /*外边距为自身宽高的一半*/
background-color: pink; /*方便看效果*/
}
6、第六种办法
-水平垂直居中二
/*
1、你父级没有定位时,相对于浏览器定位居中
2、相对于最近有定位的父级(position: relative/absolute)定位居中
*/
/*未知容器的宽高,利用`transform`属性*/
div {
position: absolute; /*相对定位或绝对定位均可*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /*方便看效果*/
}
7、第七种办法
-水平垂直居中三
/*利用flex布局实际使用时应考虑兼容性*/
.container {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.containerdiv {
width: 100px;
height: 100px;
background-color: pink; /*方便看效果*/
}
8、第八种办法
-水平垂直居中四
/*利用text-align:center和vertical-align:middle属性*/
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
white-space: normal;
vertical-align: middle;
}