定宽定高情况下元素居中的方法
居中元素定宽定高情况
<span style="font-size:24px;">.father{
width: 500px;
height: 500px;
border:1px solid #000;
}
.son{
width: 100px;
height: 50px;
background-color: red;
}
<div class="father">
<div class="son"></div>
</div>
</span>
1、水平局中:
方法一:
.son{
margin: 0 auto;
}
方法二:
包含居中元素的容器设置相对定位,居中子元素绝对定位于相对包含容器左边边缘的50%处,再利用居中子元素宽度的一半负外边距
使其局中。(由此也可以得出垂直居中的一种方法)
.father{
position: relative;
}
.son{
position: absolute;
left: 50%;
margin-left: -50px;(.kuangao元素宽度的一半)
}
方法三:
外层包含元素相对定位,居中元素绝对定位于包含容器的50%处,再利用transform:translate(-50%)使其居中。(由此得出垂直居
中的一种方法)
.father{
position: relative;
}
.son{
position: absolute;
left: 50%;
transform: translate(-50%);
// 或者 transform:translateX(-50%);
}
2、垂直局中:
方法一:
利用上下外边距为auto
.father{
position: relative;
}
.son{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
方法二:
包含居中元素的容器设置相对定位,居中元素绝对定位于相对包含容器上边边缘的50%处,再利用居中元素宽度的一半负外边距使其
垂直局中。
.father{
position: relative;
}
.son{
position: absolute;
top:50%;
margin-top: -25px; // son高度50px的一半即25px
}
方法三:
外层包含元素相对定位,居中元素绝对定位于包含容器上边边缘的的50%处,再利用transform:translate(-50%)使其垂直居中。
复制代码
.father{
position: relative;
}
.son{
position: absolute;
top:50%;
transform:translate(-50%);
// 或者 transform:translateY(-50%);
}
3、既水平居中又垂直居中
方法一:
复制代码
.father{
position: relative;
}
.son{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
方法二:
.father{
position: relative;
}
.son{
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;//(.kuangao元素宽度的一半)
margin-top: -25px;//(.kuangao元素高度的一半)
}
方法三:
.father{
position: relative;
}
.son{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法四:页面居中(居中元素始终处于页面的中央),相对于屏幕而定中心,随着屏幕缩放而偏移,但始终处于屏幕中央
.son{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 999;
}
注意:居中inline元素
水平局中:text-align:center
垂直居中:height与line-height的组合使用
总得来说,在定宽高的居中可以考虑一下以下的属性以及它们的组合使用
1、margin: 0 auto;
2、transform: translate();
3、position: absolute;
left: 50%
margin-left: 居中元素的一半的负值