Display message page center like Google Exception message

Display message page center. Display any kind of message in page left right center position with simple CSS and HTML. Working in all screen resolution.

Today i logged in google one service and due to some network error, Google show exception message.

Exception message not important but the style of display message is very cool.

Message was display in left right center position with little space on top, also message display in same position in all screen resolution.

When i check page source message generated with simple HTML and single class of css, Style is so simlpe and user friendly, any one like it.

Demo for display message page center

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

CSS for display message page center

.msg-block{
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    margin: 30px auto 100px;
    padding: 35px;
    width: 70%;
    max-width:500px;
    min-width:300px;
}

 

HTML for display message page center

<div class="msg-block">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Message is simple and plain, we can add our theme related style and color style for message css.

So, how’s it simple and perfect right?