How to implement a simple centered layout using HTML and CSS

How to use HTML and CSS to implement a simple centered layout

In web design, centered layout is a very common layout method. By using HTML and CSS, we can easily implement a simple and beautiful centered layout.

Before we begin, we need to establish a basic HTML structure. First, we create a <div> element that contains the content and then place it in a <code><div> container with a unique ID. Next, we introduce an external CSS file into the tag of the HTML file to facilitate us to write and manage styles. <p>Here is a basic HTML structure as an example: </p><pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt; &lt;title&gt;居中布局&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;container&quot;&gt; &lt;div id=&quot;content&quot;&gt; &lt;h1&gt;我的居中布局&lt;/h1&gt; &lt;p&gt;这是一个示例文本。&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>Next, we will use CSS to center the layout. We will achieve this through a series of styles. </p> <p>First, we need to set the style of the container. We will use flex layout to achieve centered layout. In the style sheet (styles.css), add the following code: </p><pre class='brush:css;toolbar:false;'>#container { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f3f3f3; }</pre><p>In the above code, <code>display: flex;Use flex layout, align-items: center;For horizontal centering, justify-content: center;For vertical centering, height: 100vh;Set the container height to the viewport height, background-color: #f3f3f3 ;Set the background color, you can change it as needed.

Next, we need to set the style of the content. To center the content, we set it up as an inline block-level element and add some margin to maintain spacing. In the style sheet (styles.css), add the following code:

#content {
    display: inline-block;
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

p {
    color: #666;
}

In the above code, we use display: inline-block; to set the content to an inline block-level element,text-align: center;Align it center, padding: 20px;Add some padding to maintain spacing, background-color: #fff;Set the background The color is white, border-radius: 5px;Add rounded corners,box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);Add shadow effect,color: #333; and color: #666; are used to set the color of titles and paragraphs. You can also change it as needed.

Through the above steps, we have successfully implemented a simple and beautiful centered layout. Now, you can run this HTML file in your browser to see the effect.

Summary:
A simple centered layout can be easily implemented using HTML and CSS. By setting the container style to flex layout and setting the content style, we can achieve horizontal and vertical centering effects. The above code can be used as a basic template, and appropriate adjustments and improvements can be made as needed during actual development. Hope this article is helpful to you!