利用绝对定位,先将元素的左上角通过 top:50% left:50% 定位到页面的中心,然后再通过转换属性 -- translate 来调整元素的中心点到页面的中心。

div {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

flex 布局

使用 flex 布局,通过 align-items:centerjustify-content:center 设置容器内的子元素在垂直和水平方向上为居中分布。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
<div class="container">
  <div class="box"></div>
</div>

多列等高布局

多列布局中,列之间的高度不一样就会像上图一样参差不齐,影响整齐度。这里介绍最简单实用的方法 -- flex

设置 item 在交叉轴上的布局方式为 stretch(拉伸为父元素的高度),就能实现多列等高效果:

.container {
  display: flex;
  align-items: stretch;
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

01.png

分类:
前端
标签: