垂直居中对齐CSS代码

最新推荐文章于 2023-02-17 21:50:34 发布

最新推荐文章于 2023-02-17 21:50:34 发布 · 576 阅读

文章标签：

#前端 #ViewUI

本文介绍如何使用Less混入（mixins）来实现元素的垂直居中对齐，通过核心代码演示并提供案例效果，适用于前端开发人员。

垂直居中对齐的核心代码如下：

.elment{
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

具体参见如下案例，利用less将居中对齐的代码携程mixins。

html

<div class="outer">
    <div class="inner">vertical align anything with less<div>
</div>

css

.verticalAlign{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.outer{
  width:400px;
  height:200px;
  border:1px solid #000;
  margin:10px;
  text-align:center;
}
.inner{
   .verticalAlign;
}

案例效果，参见 codepen。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------