如何在页面中心对齐div？

问题描述：

我想要一个垂直和水平居中的div，即在页面的中心。我尝试了位置：绝对，并使div的右上角0左上！但问题是，当我放大与其他标题和其他div重叠的页面！请帮帮我！如何在放大页面时将div放置在页面中心而不与其他div重叠？如何在页面中心对齐div？

就像我曾尝试：

.center{ 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     margin: auto; 
}

尝试设置保证金'auto' –

糟糕！我忘了在我的代码中提到margin：auto。我已经尝试过，但仍然不起作用 – Fred

试试这个... https://jsfiddle.net/DChandraShekhar/8a7L8dtv/1/ –

答

html, body { 
 
    height:100%; 
 
} 
 

 
.center { 
 
    border: 2px solid blue; 
 
    margin: auto; 
 
    position: relative; 
 
    text-align: center; 
 
    top: 50%; 
 
    width: 20%; 
 
}

<div class="center"> 
 
    <p>Test Text</p> 
 
</div>

答

尝试这个

HTML

<div class="center"> 
    Lorem ipsum dolor sit amet, 
</div>

CSS

html,body{ 
    height:100%; 
} 
.center{ 
    position: relative; 
    top:50%; 
    left:50%; 
}

Link for reference

希望这有助于..

答

尝试，

html{ 
 
    height:100%; 
 
} 
 
body 
 
{ height:100%; 
 
    background-color: #fcfcfc; 
 

 
} 
 
.center 
 
{ 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ccc; 
 
    border-radius: 3px; 
 
}

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

答

水平居中块元素（如DIV），使用余量：汽车

.center { 
 
    margin: auto; 
 
    width: 60%; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
}

<div class="center"> 
 
    <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p> 
 
</div>

答

Flex是最好的解决方案，完美的位置。

如果你想要一个加载器，只需要一个固定位置的全尺寸div，并使用flex的div内容。

柔性引导https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body, html { 
 
    height:100% 
 
} 
 

 
body { 
 
    display:flex; 
 
    margin:0; 
 
    flex-direction:column; 
 
} 
 

 
.mydiv { 
 
    margin:auto; 
 
}

<div class="mydiv">test</div>

我也认为flex是最好的解决方案。只要注意一些旧的浏览器 - 它可能需要另一种解决方案。您可能不应该在身体上使用flex以避免影响页面上的所有其他元素。相反，将它用在围绕你的中心div的wrapper-div上。 Like

test

根据需要给包装100％宽度和高度以及位置固定或绝对。 – Ina

这仍然行不通！ div在放大页面时与其他元素重叠！我想修复它的位置 – Fred

如何在页面中心对齐div？

相关推荐