常用的居中方式

在HTML中实现元素的居中，通常需要结合HTML结构和CSS样式。以下是一些常见的HTML居中代码示例，涵盖水平居中、垂直居中以及水平和垂直居中的场景：

1.文本水平居中

如果需要让文本在容器内水平居中，可以直接使用CSS的`text-align`属性。

```html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>水平居中</title>

  <style>

    .text-center {

      text-align: center;

      border: 2px solid #000; /* 添加边框以便观察效果 */

      padding: 20px;

    }

  </style>

</head>

<body>

  <div class="text-center">

    这是一段水平居中的文本。

  </div>

</body>

</html>

``

2. 块级元素水平居中对于块级元素（如 div ），可以通过设置左右外边距为 auto 来实现水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>块级元素水平居中</title>
  <style>
    .block-center {
      width: 50%; /* 定义宽度 */
      margin: 0 auto; /* 左右外边距自动 */
      border: 2px solid #000;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="block-center">
    这是一个水平居中的块级元素。
  </div>
</body>
</html>

3. 图片水平居中图片是内联元素，可以通过将其设置为块级元素，然后使用 margin: auto 来实现水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,

二丶简短的HTML居中代码示例：

水平居中

<div style="text-align:center;">
  文本水平居中
</div>

块级元素水平居中

<div style="width:50%; margin:0 auto; border:1px solid #000;">
  块级元素水平居中
</div>

图片水平居中

<img src="image.jpg" style="display:block; margin:0 auto;">

垂直居中（单行文本）

<div style="height:100px; line-height:100px; border:1px solid #000;">
  垂直居中
</div>

水平和垂直居中（Flexbox）

<div style="display:flex; justify-content:center; align-items:center; height:100vh;">
  水平和垂直居中
</div>

文章版权归作者所有，未经允许请勿转载。

THE END