具有动态宽度和高度的垂直和水平中心块

Posted

技术标签:

【中文标题】具有动态宽度和高度的垂直和水平中心块【英文标题】:Center block vertically and horizontally with dynamic width and height 【发布时间】:2012-01-09 19:53:29 【问题描述】:

我需要将元素垂直和水平居中,并且该元素不能有任何固定尺寸。元素的内容不得受到影响...这意味着一些元素将文本左对齐,其他元素居中,它们可能是图像等。

这是我目前所在的位置:http://jsfiddle.net/Shpigford/BUbmz/

蓝色块的宽度和高度会根据内容动态变化并水平居中,效果很好。

但我现在需要做的是将蓝色块垂直居中。

蓝色块不能有任何固定尺寸,但红色块可以

这是我的 CSS:

section 
  width: 500px;
  height: 300px;
  background: red;

.options 
  display:table;
  margin: 0 auto;
  background: blue;

h2 
  text-align: center;
  margin: 0;
  padding: 0;

ul 
  margin: 0;
  padding: 0;
  text-align: center;

li 
  text-align: left;

还有 html

<section>
  <div class="options">
    <h2>My question</h2>
    <ul>
      <li>Ligula Quam</li>
      <li>Condimentum Nullam Mollis</li>
      <li>Aenean</li>
      <li>Commodo Dolor Nibh Ligula Vulputate</li>
    </ul>
  </div>
</section>

【问题讨论】:

【参考方案1】:

这是一个垂直居中 DIV 的解决方案,并为各种浏览器(包括旧 IE 版本)提供备用方案。

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[编辑]

翻译一下,你的小提琴变成了这样:

http://jsfiddle.net/GolezTrol/BUbmz/1/

【讨论】:

以上是关于具有动态宽度和高度的垂直和水平中心块的主要内容,如果未能解决你的问题,请参考以下文章

css 这将一个未知大小的图像在一个框内垂直和水平居中。包装盒具有明确的宽度和高度。这是一个h

具有比例宽度和文本驱动高度的动态 UILabel

垂直和水平居中 div 没有定义的高度 [重复]

使锚标记填充父 flex 元素的 100% 高度和宽度,同时垂直和水平居中

opencv:垂直和水平报告视频高度和宽度相同

如何制作垂直和水平居中的盒装div容器[重复]