CSS学习中|对比如何使用text-align = center和margin：auto

最新推荐文章于 2022-08-20 18:30:13 发布

美女变成老太婆✿

最新推荐文章于 2022-08-20 18:30:13 发布

阅读量321

点赞数

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47788265/article/details/107512379

版权

本文探讨了在CSS中如何使用`text-align = center`和`margin: auto`来实现元素的水平居中。`text-align`适用于行内元素和行内块元素的居中，而`margin: auto`则通过设置块级元素的左右外边距使其居中。

摘要由CSDN通过智能技术生成

首先看margin : auto

是为块级元素设置外边距，通过将左右外边距设置相同的值使元素水平居中，即可以理解为盒子居中

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Margin</title>
  <style>
   div {
    background-color: blue;
    width: 400px;
    height: 400px;
    /* 块级盒子居中水平对齐 1.必须有宽度 2.左右外边距都设置为auto */
    margin: auto;
  }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

样例：

div实现水平居中