iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

30天搞定CSS及切版系列 第 13

CSS垂直置中

absolute + top/left + tranform

利用top/left將子元素的左上角對齊中間,再利用transform平移元素自身50%的寬高達到置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  position:relative;
}
.child
{
   border:1px solid black;
   height:50px;
   width:50px;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%)
}

Flex

將父元素設定為Flex,同時使用justify-content讓主軸置中,再使用align-items讓次軸置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  display:flex;
  justify-content: center;
  align-items: center;
}

relative + calc

利用calc計算出置中,父元素(100% - 自身高) / 2 = 垂直置中。
margin:auto 水平置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  

}
.child
{
   border:1px solid black;
   height:30px;
   width:30px;
   position:relative; 
   top : calc((100% - 30px) / 2);
   margin:auto;
}

上一篇
CSS Box-Shadow
下一篇
CSS display:grid
系列文
30天搞定CSS及切版16

尚未有邦友留言

立即登入留言