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;
}

参考:

作者: YanWen

Web 开发者

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s