我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好,但不是垂直中心。添加position: fixed;后,水平方向甚至没有居中。

以下是完整的一套:

.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; } < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >

我如何中心这个框在屏幕与CSS?


当前回答

或者只是在原始CSS中添加left: 0和right: 0,这使得它的行为类似于常规的非固定元素,并且通常的自动边距技术也起作用:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

请注意,您需要使用一个有效的(X)HTML DOCTYPE,以使其在IE中正确运行(当然,无论如何您都应该有..!)

其他回答

你基本上可以将它包装到另一个div中,并将其位置设置为fixed。

.bg { 位置:固定; 宽度:100%; } .jqbox_innerhtml { 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; } < div class = " bg”> < div class = " jqbox_innerhtml”> 这应该在一个水平和垂直居中的盒子里。 < / div > < / div >

我使用vw(视口宽度)和vh(视口高度)。Viewport是你的整个屏幕。100vw是屏幕的总宽度,100vh是屏幕的总高度。

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

中心定位元件 (这是我所知道的最简单最好的方法)

position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

用于水平和垂直居中(如果高度与宽度相同)

position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

这两种方法都不会限制居中元素的宽度小于视口宽度,当在flexbox中使用边缘时,在居中元素内部

很简单,试试这个

position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;

我用的方法很简单。例如,我有一个定位:固定的导航条,所以我调整它,在边缘留下一个小空间,像这样。

nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}

其思想是取宽度的剩余百分比(在本例中为2%)并使用它的一半。