How to center div with css-Front-end Q&A-php.cn

How to center div with css

王林

Release： 2023-05-21 10:00:37

Original

3828 people have browsed it

CSS is an important part of front-end development. It can help us beautify web pages and make them more beautiful, easy to understand and navigate. In web design, it is often necessary to center a div element to make the page more elegant. This article will introduce how to use CSS to center a div element.

In CSS, there is a way to center a div element by using the margin attribute. First, we need to set the width and height of our div element, and then fill the extra space with the margin property. Let's take a look at how to achieve the centering effect:

Method 1: Use the text-align attribute

Before relative positioning and absolute positioning, we can try to use the text-align attribute. This attribute is used for horizontal centering, but the width must be set for the element. For example:

<style>
    .container {
      width: 60%;
      text-align: center;
      border: 1px solid black;
    }
    .content {
      width: 40%;
      background-color: lightgray;
    }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Copy after login

In this example, we put the div and its content in a parent element, and then set the text-align attribute of the parent element to center, which will make the div element horizontally Top and center. But this method only works for block-level elements.

Method 2: Use the margin attribute

Use the margin attribute to center an element, which can be used for horizontal and vertical centering. We can achieve a central alignment using the following code:

<style>
  .container {
    height: 150px;
    border: 1px solid black;
  }
  .content {
    width: 30%;
    height: 50%;
    margin: auto;
    background-color: lightgray;
  }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Copy after login

In this example, we use the margin property to center the div element vertically and horizontally. When the auto value is set, the browser will place the div element in the center of the page. However, it is important to note that this method only works for elements with fixed width and height.

Method 3: Use absolute positioning

We can use the absolute positioning method to center the div element. We only need to set its parent element to relative positioning, then set the value of the left and top attributes of the div element, and set the margin attribute to auto to center it horizontally and vertically. For example:

<style>
  .container {
    position: relative;
    height: 300px;
    border: 1px solid black;
  }
  .content {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 25%;
    top: 25%;
    margin: auto;
    background-color: lightgray;
  }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Copy after login

In this example, we are using a mix of relative and absolute positioning. Set the parent element to relative positioning and center the child elements vertically and horizontally using the left, top, and margin properties.

Method 4: Use the display: flex attribute

In CSS3, a very exciting new attribute is introduced: display: flex. This attribute can help us achieve a very convenient layout. Using this property we can center child elements horizontally and vertically within the same container. For example:

<style>
  .container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 150px;
    border: 1px solid black;
  }
  .content {
    background-color: lightgray;
  }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Copy after login

In this example, we use the attribute display: flex; to set the element container to a flex container. Then use the align-items: center and justify-content: center properties to center the child elements horizontally and vertically.

Conclusion

In CSS, we can center a div element horizontally and vertically in a web page by using text-align, margin, absolute positioning, or the Flexbox property. Each method has its own advantages, disadvantages and applicable scenarios. Choose the appropriate method according to actual needs.

In the absence of special requirements, it is recommended to use the fourth method - using the display: flex attribute. It is the easiest to use and works well in most browsers.

The above is the detailed content of How to center div with css. For more information, please follow other related articles on the PHP Chinese website!