diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index fa8ad56a..b0120ca9 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -245,8 +245,13 @@ tr.payer_line .balance-name{
     margin-top: 10px;
 }
 
-.flash {
+.messages {
+    display: flex;
+    justify-content: center;
     position: absolute;
+    top: 0.6rem;
+    width: 100%;
+    pointer-events: none;
 }
 
 .light {
diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
index 85109112..c2bd71f9 100644
--- a/ihatemoney/templates/layout.html
+++ b/ihatemoney/templates/layout.html
@@ -13,8 +13,6 @@
     {% block head %}{% endblock %}
     <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
-            var left = window.innerWidth/2-$('.flash').width()/2;
-            $(".flash").css({ "left": left+"px", "top":"0.6rem" });
             setTimeout(function(){
                 $(".flash").fadeOut("slow", function () {
                     $(".flash").remove();
@@ -81,9 +79,11 @@
 </div>
 {% endblock %}
 
-{% for message in get_flashed_messages() %}
-<div class="flash alert alert-success">{{ message }}</div>
-{% endfor %}
+<div class="messages">
+    {% for message in get_flashed_messages() %}
+    <div class="flash alert alert-success">{{ message }}</div>
+    {% endfor %}
+</div>
 
 {% block footer %}
 <footer>