I know this has been asked many times but I've tried pretty much anything I've read so far.

I want to align both horizontally and vertically an img inside a div.

The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.

I can align horizontally OR vertically but not both.

HTML code: https://pastebin.com/7dCQ1aJg

    

    

        

        ×
            

                

                    

                        
   
                        
                        
                        
                                    
                                    
                        
                        
                        
                        
                    
                    

                        
   
                            

                                

                                    

                                    
                                    
                                    

                                    
                                    
                                
                            
                            

                                

                                
                                
                            
                            

                                

                                
                                
                            
                            

                                

                                
                                
                            
                        
  
                    
                
            
        
    

Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q

(.content only contains "height: inherit" and the modal is 550px)