我有一个div,将有这个CSS:
#some_kind_of_popup { position: fixed; top: 100px; min-height: 300px; width: 90%; max-width: 900px; }
现在,我如何使这个div居中?我可以使用margin-left:-450px;左:50%;但是这将仅在屏幕> 900像素。之后(当窗口<900像素时),它将不再居中。 我当然可以用某种js做到这一点,但是有一个“更正确的”这样做与CSS?
解决方法
您可以将固定或绝对定位元素设置向右和向左居中为0,然后将margin-left& margin-right to auto,如同你以一个静态定位的元素为中心。
#example { position: fixed; /* center the element */ right: 0; left: 0; margin-right: auto; margin-left: auto; /* give it dimensions */ min-height: 10em; width: 90%; }
看到这个例子工作on this fiddle。