css中元素垂直居中和水平居中方式

最新推荐文章于 2024-07-26 08:00:00 发布

web老猴子

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量1k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/web220507/article/details/124961009

版权

本文介绍了CSS中实现元素水平和垂直居中的多种方法，包括text-align: center、margin: 0 auto、定位、flex布局以及transform的组合使用。详细讨论了每种方法的适用场景和限制条件，为开发者提供了灵活的布局解决方案。

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

水平居中方案

text-align: center

text-align: center可以使行内级元素和行内块级元素在父元素中水平居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> .container {
      width: 300px;
      height: 300px;
      background-color: #eee;
      text-align: center;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

    .avatar {
      width: 100px;
      height: 100px;
    } </style>
</head>
<body>
  <div class="container">
    <!-- 这里的div是为了让span元素和img元素换行显示 -->
    <div>
      <span class="box">lorem</span>
    </div>
    <img src="https://p9-passport.byteacctimg.com/img/user-avatar/745c26f761d5ad2b65d79f98eee61a5f~300x300.image" class="avatar">
  </div>
</body>
</html>

掘金代码片段

margin: 0 auto

margin: 0 auto可以使有设置宽度的块级元素在水平方向上居中

注意: 使用margin: 0 auto让块级元素水平居中的前提条件是 块级元素有设置对应的宽度

因为块级元素默认的宽度是独占父元素的一行，此时就不存在水平居中不居中的问题了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> .container {
      width: 300px;
      height: 300px;
      background-color: #eee;
    }

    .box {
      /* 必须设置div.box的宽度 */
      width: 100px;
      height: 100px;
      /*
        父元素的宽度 = margin-left + margin-ri

最低0.47元/天解锁文章

web老猴子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css中元素垂直居中和水平居中方式

水平居中方案text-align: centertext-align: center可以使行内级元素和行内块级元素在父元素中水平居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
复制链接

扫一扫