CSS: сделать изображение точно в середине страницы

Question

Я бы хотел сделать центр изображения точно посередине страницы, чтобы он был по центру по вертикали и горизонтали!Могу ли я сделать это с 765x741?Спасибо!

Answer 1

Да, вы можете создать статический класс в CSS, как уже предлагалось:

.centerPic
{
    position:fixed;
    left: 50%;
    top: 50%;
    margin-left:-382px; /* Static value */
    margin-top:-370px; /* Static value */
}

Но этот подход ограничивает использование других изображений различных размеров . Я предлагаю вам установить свойства margin-left и margin-top в зависимости от размеров изображения в вместо динамического JavaScript :

function SetCenterStyle (objPic)
{
    objPic.className = "centerPic";
    objPic.style.marginLeft = ( -1 * ( parseInt(objPic.width) / 2 ) ) + "px";
    objPic.style.marginTop = ( -1 * ( parseInt(objPic.height) / 2 ) ) + "px";
}

(После этого вы можете опустить настройки margin-left и margin-top в классе centerPic)

Answer 2

Создать класс CSS для изображения.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Answer 3

Я решил это так:

img.class-name{

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

Answer 4

Хотя у вас есть изображение фиксированного размера, посмотрите на этот вопрос (и принятый ответ) для решения, которое позаботится о неопределенных размерах изображения или браузера.

Answer 5

использовать поле: авто авто;

Я думаю, что это лучший способ

Answer 6

Да, вы можете! Следующий CSS сделает это

.centerImg
{
    position:fixed;
    left:50%;
    top:50%;
    margin-left:-382px /*half the width*/
    margin-top:-370px /*half the height*/
}