有没有办法，我可以使用css3 calc在我的屏幕的中心放置一个对话框？ [英] Is there a way I can use css3 calc to place a dialog in the center of my screen?

问题描述

我试图使用以下内容：

<div class="center">
  ...
</div>

CSS：

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2);
    left:calc(50% - 50px/2);
}

但是，看起来div不是位于视口的中心，在包围它的div的中心。

However it seems like the div is positioned not in the center of the viewport but in the center of the div that encloses it.

如何使用calc将div设置在屏幕中心？

How can I make it so the div is positioned in the center of the screen using calc ?

推荐答案

为什么不使用 top：0; bottom：0; left：0; right：0; trick？

why not use the top: 0; bottom: 0; left: 0; right: 0; trick?

http://jsfiddle.net/3n1gm4/WpYHS/

html：

<div class="centered">
    <h1>Perfectly Centered</h1>
    <h3>This is centered top to bottom and left to right</h3>
</div>

CSS：

.centered {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50%; /* any width */
    height: 30%; /* any height */
    margin: auto;

    text-align: center;

    background: #deface;
}

这篇关于有没有办法，我可以使用css3 calc在我的屏幕的中心放置一个对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！