如何集中div跨浏览器

问题描述

我想知道CSS中将div居中的一种方式，而不必依赖于上下左右设置边距，并用魔术数字控制高度.

I would like to know a way in CSS to center a div in a without being dependent set margin-top and down, control the height with magic numbers.

已经了解了所有这些弊端的表格，无论好坏，但都取决于某些内容，并且希望对任何浏览器(至少是IE8 +)都提供永久性的解决方案.

The forms that have learned all these disadvantages, some better and worse, but all are dependent on something, and would like a permanent solution to any browser (at least IE8+).

我想水平和垂直地将div元素居中集中，而没有魔幻的数字.div高度动态增长并自动计算的位置并集中化.

I want centralize horizontally and vertically a div element without magical numbers. Where the height of the div to grow dynamically and automatically be calculated and centralized.

为了澄清，这是我不想要的示例.要使用定义的高度和高度，将没有灵活性，必须使用js操纵添加到每个项目的高度.

To clarify, is an example of what I DO NOT want. For use widht and height defined leaves no flexibility, and have to be manipulating the height added to each item using js.

http://jsfiddle.net/QsWfg/

<div id="container"></div>

#container { position: absolute; width: 380px; height: 360px; left: 50%; top:50%;      padding: 30px; margin-left: -220px; margin-top: -210px; background: #000; }

推荐答案

喜欢吗?

Codepen示例: http://cdpn.io/BuDLo

Codepen example: http://cdpn.io/BuDLo

HTML

<div class='modal-overlay'>
  <div class='modal-box'></div>
</div>

CSS

.modal-overlay {
  background: black;
  bottom: 0;
  height: auto;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

.modal-box {
  background: white;
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
}

这篇关于如何集中div跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！