Centrar unha imaxe horizontalmente

OPCIÓN 1. Con margin:0 auto;. Debemos colocar un display:block, xa que por defecto as imaxes son elementos inline-block. Se colocasemos o margin:0 auto; dentro do elemento pai, serviría para centrar este, pero non para centrar a imaxe.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
    }    
    img{
        display:block;
        margin:0 auto;
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 2. Con align-text:center. Neste caso debemos de colocar align-text:center no elemento pai. Neste exemplo colocámolo no body. Sen embargo, o normal é inserir a imaxe dentro dun div, e colocar o align-text no div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
        text-align: center;
    }    
    img{
        
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 3. Empregamos o margin:0 auto para centrar un div, e tamén text-align:auto dentro do div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>

Se ademais queremos centrala verticalmente dentro do div pai, podemos facelo de varios xeitos. Por exemplo inserir a imaxe dentro dun div, que sexa fillo do div wrapper. Ou máis sinxelo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    img{
        height:300px;
        margin-top:200px;
        transform:translateY(-50%)
    }
    
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>