讓容器內容置中
方法1
.container{
display: flex;
justify-content: center; /* 內部元素水平置中*/
align-items: center; /* 內部元素垂直置中*/
}
參考
.container{
display: flex;
justify-content: center; /* 內部元素水平置中*/
align-items: center; /* 內部元素垂直置中*/
}
參考
※若使用 bootstrap 可使用現成class
<div class="d-flex justify-content-center align-items-center"></div>
※若內部物件要靠右則設定 margin-left: auto
方法2 (垂直置中)
<div style="position: relative">
<uib-progressbar style="position: absolute; top: 50%; transform: translateY(-50%)" animate="false" value="dynamic" type="success"><b>{{progress}}%</b></uib-progressbar>
</div>
ps. 若考慮網頁會出現捲軸，position 要改為 fixed
※若內部物件要靠右則設定 margin-left: auto
方法2 (垂直置中)
<div style="position: relative">
<uib-progressbar style="position: absolute; top: 50%; transform: translateY(-50%)" animate="false" value="dynamic" type="success"><b>{{progress}}%</b></uib-progressbar>
</div>
ps. 若考慮網頁會出現捲軸，position 要改為 fixed
讓元素本身置中
<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%)"></div>
讓元素本身靠右
<div style="display:flex;"><div style="margin-left:auto;margin-right:0;>靠右</div></div>
