CSS: image center

11 April 2020, 10:16 pm by antelove



Happy Coding


index.html

/* ------------------------------------------------------------ */
/*  CSS: image center                                           */
/*                                                              */
/*  Author: antelove                                            */
/*  Website: antelove.com                                       */
/* ------------------------------------------------------------ */

<!DOCTYPE html>
<html>

    <head>

        <title>CSS image center</title>

        <style>

            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%); /* IE 9 */
                -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
            }

        </style>

    </head>

    <body>

        <img src="https://images.unsplash.com/photo-1586560615973-2d5aae054ae5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="shot" />

    </body>

</html>

Thank for reading :)


Keywords:


No Action Title
1 codepen: full page
2 codepen: debug mode
0 comment