How to align body of the webpage to center?


Tags: html,css

Problem :

I tried in my CSS such property like text-align: center, but it wasn't working. Then I tried to set left-margin and right-margin to auto but it is not working too. How else can I center all info of my webpage? Here's the code:

<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Yevhenii Zhdan">
        <style type="text/css">
            body {
                padding: 20px;  
            }
            h1, h2 {
                font-weight: normal;
                color: #0088dd;
                margin: 0px;
                text-align: center;
            }
            h1 {
                background-image: url("images/bob.gif");
                background-repeat: no-repeat;
                text-indent: -9999px;
                padding-bottom: 3%;
            }
            h2 {
                padding: 10px;
                width: 12em;
                font-family: "Gill Sans", Arial, sans-serif;
                font-size: 90%;
                text-transform: uppercase;
                letter-spacing: 0.2em;
                border: 2px solid #0088dd;
                border-right: none; 
                border-bottom: none;
            }
        </style>
    </head>
    <body>
        <h1>YZhdan</h1>
        <h2><b>How to find me:</b></h2>
            <br />
        <iframe 
        width="450" 
        height="350"
        src="https://www.google.com.ua/maps?q=...&amp;output=embed">
        </iframe>
        <p><b>&#169; Yevhenii Zhdan</b></p>
    </body>

</html>

body {
  padding: 20px;
}
h1,
h2 {
  font-weight: normal;
  color: #0088dd;
  margin: 0px;
  text-align: center;
}
h1 {
  background-image: url("images/bob.gif");
  background-repeat: no-repeat;
  text-indent: -9999px;
  padding-bottom: 3%;
}
h2 {
  padding: 10px;
  width: 12em;
  font-family: "Gill Sans", Arial, sans-serif;
  font-size: 90%;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 2px solid #0088dd;
  border-right: none;
  border-bottom: none;
}
<h1>YZhdan</h1>
<h2><b>How to find me:</b></h2>
<br />
<iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&amp;output=embed">
</iframe>
<p><b>&#169; Yevhenii Zhdan</b>
</p>



Solution :

You can wrap all content in a div, then you would set a width on that div and set the left and right margin to auto.

<head>
    <style>
        .container {
            width: 75%;
            margin-left: auto;
            margin-right: auto;
    </style>
</head>
<body>
    <div class="container">
    <!-- other content -->
    </div>
</body>

    CSS Howto..

    How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?

    How to change text-selection styles with javascript [duplicate]

    How do I invoke a CSS3 transition using JavaScript?

    Telerik RadEditor for MOSS - How do I suppress min-width inline CSS?

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How to edit the CSS of a selector in Polymer 1.0

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    Changing backgrounds for CSS slideshow

    How to edit WordPress CSS written as inline CSS? [duplicate]

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    How can I add read more click event to only open one news article?

    How to change first word color through css [duplicate]

    how to add/remove a class from a link

    How to create offer tag with css and pass value to it

    How to center a relative div in my case?

    CSS how to select nav and li tags but exclude specified class?

    How to overlay a play button over a thumbnail image using only CSS

    CSS/Javascript: How to draw minimal border around an inline element?

    How to use css selector with “not” in c#?

    How to fix width of DIV that contains floated elements?

    How to display an image from a dropdown menu selection?

    How to Highlight a list item after user clicks on link

    How to make a div a link as it transitions in CSS

    How to correctly set background image in a HTML page using a JavaScript function

    How to check multiple conditions within a td in Angular table?

    How to implement fade in effect for CSS checkbox

    How to make a div inside a div while keeping same image background

    how to properly use css in jsf?

    How do I load a nested web page in a
    tag using only javascript and html?

    How to position two
    elements side by side?