Question

I'd like the .accoutrements div and .svg logo to be exactly centred in the middle of the page, both horizontally and vertically.

I'm having trouble vertically aligning a div across mobile devices (horizontal alignment seems to be working). It works correctly on desktops and the Responsive Design Mode on Safari/Chrome. However, when viewed on an iPhone/iPad it isn't aligning in the middle, it's lower than it should be. What could be causing this?

I'm also having the same issue with the about page, the text box should be horizontally/vertically in the middle of the page.

The image of the left is how it should look (and how it looks on desktop), the image on the right is how it currently looks on my iPhone SE.

Logo page:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">

About page:

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <link href="http://static.tumblr.com/y3vtpdx/Lskoeb774/favicon.png" rel="icon" sizes="32x32" type="image/png">
    <title>
        Accoutrements
    </title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta charset="UTF-8">
    <meta content="Accoutrements is a multidisciplinary studio specialising in art direction, design, photography and screen printing." name="description">
    <meta content="accoutrements, art direction, design, manchester, photography, screen printing, studio” name=">
    <meta content="index,follow" name="robot">
    <meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
    <meta content="Accoutrements" name="author">
    <style>

    body {font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    }

    .about {
    position: fixed;
    right: 40px;
    bottom: 40px;
    }

    .shop {
    position: fixed;
    right: 40px;
    top: 40px;
    }

    .studio {
    position: fixed;
    left: 40px;
    top: 40px;
    }

        .mood {
    position: fixed;
    left: 40px;
    bottom: 40px;
    }

    a {
    text-decoration: none;
    }

    .accoutrements {
    margin-top: 50vh;
    transform: translateY(-50%);
    cursor: pointer;
    }

    svg.logo
    {
    position: relative;
    max-width: 80%;
    left: 10%;
    }

    svg.logo:emptyc
    {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    @media screen and (min-width: 1000px) {
    svg.logo {
    max-width: 800px;
    position: inherit; 
    display: block;
    margin: auto;
    }
    }

    </style>
</head>
<body>
    <div class="corner_link about">
        <a href="/about">About</a>
    </div>
    <div class="corner_link shop">
        <a href="/">Shop</a>
    </div>
    <div class="corner_link studio">
        <a href="/">Studio</a>
    </div>
    <div class="corner_link mood">
        <a href="/">Mood</a>
    </div>
    <div class="accoutrements">
        <svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
        <title>
            Accoutrements
        </title>
        <path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
        <path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
        <path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
        <polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
        <polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
        <polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
        <polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
        <path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
        <path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
        <path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
        <path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg> 
        <script>
        var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
        var rand = function() {
        return Math.floor(Math.random() * 6);
        };
        var randomColor = function() {
        var r = safeColors[rand()];
        var g = safeColors[rand()];
        var b = safeColors[rand()];
        return "#" + r + g + b;
        };
        var color_1 = randomColor();
        var color_2 = randomColor();
        $(document).ready(function() {
        color_change();
        $('#accoutrements').click(function() {
            color_change();
        });
        });
        function color_change() {
        color_1 = randomColor();
        color_2 = randomColor();
        $('.corner_link a').css('color', color_1);
        $('.accoutrements').css('fill', color_1);
        $('body').css('background', color_2);
        $('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
        }
        </script>
    </div>
</body>

Many thanks for your help.

Vertical alignment of div on mobile device

0 个答案: