xing-chuan

元素垂直居中的几种方式
元素的垂直居中是大家常关注的问题, 今天整理一下元素垂直居中的几种方式.html结构如下:<div id=&...
扫描右侧二维码阅读全文
27
2018/06

元素垂直居中的几种方式

元素的垂直居中是大家常关注的问题, 今天整理一下元素垂直居中的几种方式.

html结构如下:

<div id="div1">
  <div id="div2"></div>
</div>

1

#div1 {
  width: 400px;
  height: 400px;
  text-align: center;
  border: 1px dotted #ccc;
  display: table-cell;
  vertical-align: middle;
}
#div2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #3BD9CD;
}

display: table-cell 单元格居中

2

#div1 {
  width: 400px;
  height: 400px;
  text-align: center;
  border: 1px dotted #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
#div2 {
  width: 200px;
  height: 200px;
  background: #3BD9CD;
}

弹性布局, x, y轴居中

3

#div1 {
  width: 400px;
  height: 400px;
  text-align: center;
  border: 1px dotted #ccc;
  position: relative;
}
#div2 {
  width: 200px;
  height: 200px;
  background: #3BD9CD;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这里的 transform 位置变换也可以用 margin 负值 50% 来位移.

4

#div1 {
  width: 400px;
  height: 400px;
  text-align: center;
  border: 1px dotted #ccc;
  position: relative;
}
#div2 {
  width: 200px;
  height: 200px;
  background: #3BD9CD;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

需要设置宽高, 两侧自动填充.

最后修改:2018 年 06 月 27 日 11 : 05 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论