居中元素定寬定高情況
<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: 居中元素的一半的負值