Позиция CSS, используя центр элемента, чтобы позиционировать элемент с использованием процента

Question

Привет, поэтому я создал веб-сайт, и я просто понял, что когда я хочу поместить элемент html, он будет позиционировать элемент, используя его правую часть. Вот пример того, что я имею в виду. Я пытался позиционировать изображение в центре, используя проценты. Вырезанная версия моего кода css: .image{position:absolute;right:50%; Итак, когда я загрузил сайт, он отображается с правом углом изображения на 50%, а не с центром изображения на 50%. Есть ли в любом случае положение, используя центр изображения, чтобы разместить изображение на 50%, а не на левом или правом краю изображения на 50%? Я не хочу, чтобы что-то вроде position:absolue;right:45%, чтобы переместить изображение, но вместо этого используйте центр изображения, чтобы поместить изображение. Если вам нужно больше разъяснений, просто дайте мне знать.

Answer 1

Установите ширину изображения, а затем установите левое и правое поля в положение auto.

` {width: whatever you want; margin-left: auto; margin-right: auto; } ` 

Answer 2

1. Вы можете сделать это легко с помощью text-align, когда элемент, который вы хотите позиции внутри некоторого контейнера, то есть:

HTML:

<div class="container"> 
     <div class="image">Center me!</div> 
    </div> 

CSS:

.container { text-align: center } 
    .image { display: inline-block } 

1. Второй подход: если вы знаете ширину элемента (.image). Допустим, что это 400px широка:

CSS

.image { 
     position: absolute; 
     left: 50%; 
     margin-left: -200px; 
    } 

Немного сложно, может вызвать проблемы, когда ширина экрана меньше, чем ширина элемента.