犀牛的心
Subscribe
Tagged

垂直居中

A collection of 1 post

垂直居中

css垂直居中的三种实现

1.基于绝对定位它要求元素具有固定的宽度和高度。 main{ position: absolute; top: 50%; left: 50%; margin-top: -3em; /* 6/2 = 3 */ margin-left: -9em; /* 18/2 = 9 */ width: 18em; height: 6em; } 或者 main{ position: absolute; top: calc(50% - 3em); left: calc(50% - 9em); width: 18em; height: 6em; } 显然,这个方法最大的局限在于它要求元素的宽高是固定的。在通常情 况下,对那些需要居中的元素来说,其尺寸往往是由其内容来决定的。 如果 能找到一个属性的百分比值以元素自身的宽高作为解析基准,那我们的难题

元芳 Sep 28, 2017 • 2 min read
犀牛的心 © 2025
  • Contact
Powered by Ghost