Div позиция в центре

Question

ниже мой код

<div class="center" style="text-align:center;">  
    <div style="position:relative;width:26%;min-width:300px;float:left;background-color:red;border:1px solid black;""> 
    <img width=500px;height=500px; src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>"> 
    </div> 
    <div style="position:relative;float:left;min-width:100px;width:10%;height:500px;background-color:green;border:1px solid black;""> 
    </div> 
    <div style="position:relative;width:26%;float:left;min-width:300px;background-color:blue;border:1px solid black;"> 
    <img width=500px;height=500px; src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>"> 
    </div> 
    </div> 

выше DIV с классом center позиция left стороны, но я хочу, чтобы поместить его точно в центре экрана без использования Margin, padding, leftright свойства , как вы можете видеть, я уже пробовал использовать «text-align», но не работал, возможно ли это?

Answer 1

Попробуйте сделать это:

<div class="center" style="position: absolute; top: 50%; left: 50%;">  
... 

Или, чтобы сделать его более точным, попробуйте использовать calc() функцию:

<div class="center" style="position: absolute; top: calc(100%/2 - divHeight/2); left: calc(100%/2 - divWidth/2);">  
.... 

Согласно вам, вы не используете margin, потому что, когда вы уменьшите окно как минимум, div не будет перемещаться влево. Ну вот мой ответ, используя margin с pixels делайте то, что вы согрешили, но используя margin с percentage(%) поможет вам достичь того, чего вы хотите.

Использование процентов: Использование процентов не так сложно, но устройство отличается от пикселей. Если вы хотите, чтобы ваш div находился в центре.

Попробуйте сделать это:

margin: 0 auto; 

Или это:

margin: 0 calc(50% - divWidth/2); 

Это, несомненно, поможет вам в достижении того, что вы хотите.

Надеюсь, это помогло.