CSS 二维居中

div – transform

对 div 居中的主要思路是利用 leftright 属性进行位置控制。借助css3的 transform 属性或 calc 函数可以动态调整位置。

Jsfiddle示例(可能需要梯子):
//jsfiddle.net/ZenZing/Lk92vy5f/embed/result/


 
</div>

* {
  --side-length: 100px
}

.bottom {
  height: 100vh;
  background-color: red;
  
  position: relative;
}

.top {
  width: var(--side-length);
  height: var(--side-length);
  background-color: green;
  
  /* center the div.top */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* or */
  /* left: calc(50% - .5 * var(--side-length)); 
  top: calc(50% - .5 * var(--side-length)); */
}

div – grid

grid 布局。
//jsfiddle.net/ZenZing/d35sjp8q/6/embed/result/


</div>

* {
  --side-length: 100px
}

.bottom {
  background-color: red;

  height: 100vh;
  display: grid;
  place-content: center;
}

.top {
  width: var(--side-length);
  height: var(--side-length);
  background-color: green;
}

text – table-cell/flex

水平居中就用 text-align,垂直居中主要有2种方案:

(详见:https://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working

  1. 将父 div 呈现为 table,子 div 呈现为 table-cell 后就可以使用 vertical-align 进行垂直居中;
  2. 将父 div 呈现为 css3 的 flex,并使用垂直居中属性 align-items: center

Jsfiddl示例(可能需要梯子):
//jsfiddle.net/ZenZing/hkcry02b/embed/result/


text-align: center
vertical-align: middle
</div>
text-align: center
vertical-align: middle
</div>

* {
  --width: 100vw;
  --height: 50vh;
}


/* method 1 */
.container-1 {
  height: var(--height);
  width: var(--width);

  display: table;
}

.text-1 {
  background-color: green;
  color: white;

  /* center text */
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

/* method 2 */
.container-2 {
  height: var(--height);
  
  background-color: red;
  color: white;

  /* vertical align center (css3) */
  display: flex;
  align-items: center;
}

.text-2 {
  width: var(--width);

  /* text align */
  text-align: center;
}

参考:

作者: V

Web Dev

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s