Home > Web Front-end > CSS Tutorial > How to set overall centering in css

How to set overall centering in css

下次还敢
Release: 2024-04-25 12:39:15
Original
856 people have browsed it

Use CSS to achieve overall centering: Set align-items: center for vertical centering. Set justify-content: center for horizontal centering. Setting the align-items and justify-content properties together will center the entire item.

How to set overall centering in css

How to use CSS to set the overall centering

In web design, sometimes you need to center align all content. This This can be achieved by using the CSS align-items and justify-content properties.

align-items property

align-items property is used to set the vertical alignment of items (flex items) in the container. If align-items is set to center, the items will be vertically centered:

<code class="css">.container {
  display: flex;
  align-items: center;
}</code>
Copy after login

justify-content property

justify-content property is used to set the items in the container (flex item) horizontal alignment. If justify-content is set to center, the items will be centered horizontally:

<code class="css">.container {
  display: flex;
  justify-content: center;
}</code>
Copy after login

Center the whole

To center the whole, you need to set align-items and justify at the same time -content attribute:

<code class="css">.container {
  display: flex;
  align-items: center;
  justify-content: center;
}</code>
Copy after login

Example

The following example demonstrates how to use CSS to center all content in a web page:

<code class="html"><!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html></code>
Copy after login

The above is the detailed content of How to set overall centering in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template