实现一个容器上下左右居中对齐

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 实现一个容器上下左右居中对齐

实现如下


实现效果参考 element 的布局效果

<div class="box-wapper">
  <div class="wapper">
    <!--写你要实现的内容比如:图片-->
  </div>
</div>


.box-wapper {
  width: 100%;
  height: 100%;
  text-align: center;
  &::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }
  .wapper {
      display: inline-block;
      vertical-align: middle;
  }
}
</style>
目录
相关文章
|
1月前
|
前端开发 开发者 容器
|
1月前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
12 1
|
10月前
元素居中的几种方式
元素居中的几种方式
47 0
|
9月前
|
前端开发 容器
css实现容器垂直水平居中的七中方法
css实现容器垂直水平居中的七中方法
48 0
|
11月前
|
前端开发 容器
使用css实现按钮、容器边框线旋转移动
实现按钮、容器边框线旋转移动
|
算法 数据安全/隐私保护
实现注册页面的居中对齐
实现注册页面的居中对齐
75 0
|
前端开发 JavaScript
【前端】相对定位实现十字居中(上下左右居中)
【前端】相对定位实现十字居中(上下左右居中)
76 0
|
容器
如何解决火狐浏览器下文本无法撑开容器的高度问题?
如何解决火狐浏览器下文本无法撑开容器的高度问题?
240 0
试试用flex处理直线和其他元素居中
试试用flex处理直线和其他元素居中
60 0