【CSS】常见的元素水平居中和水平垂直居中

最新推荐文章于 2024-07-25 08:14:42 发布

Under-_-Taker

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量233

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/m0_51273200/article/details/120381635

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一. 水平居中

1.行内元素

父级元素用：text-align: center

<body>
  <div class="one">
    <span class="two">行内元素</span>
  </div>
</body>

<style>
  .one {
    width: 500px;
    height: 500px;
    background: antiquewhite;
    text-align: center;
  }
  .two {
    width: 100px;
    height: 100px;
    background: yellowgreen;
  }
</style>

效果如下图：

2.块级元素

子元素用：margin: 0 auto

<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>

<style>
  .one {
    width: 500px;
    height: 500px;
    background: antiquewhite;

  }
  .two {
    width: 100px;
    height: 100px;
    background: yellowgreen;
    margin: 0 auto;
  }
</style>

效果如下图

二. 水平垂直居中

1. position + margin

先给父级元素定位 position：relative ，再给子元素定位 position：absolute，上下左右都为0，最后加一个margin：auto

<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>

<style>
  .one {
    width: 500px;
    height: 500px;
    background: antiquewhite;
    position: relative
  }

  .two {
    width: 100px;
    height: 100px;
    background: yellowgreen;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
</style>

2. position + transform

先给父级元素定位 position：relative ，再给子元素定位 position：absolute，top和left 给 50%，最后用transform：translate(-50%,-50%)

<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>

<style>
  .one {
    width: 500px;
    height: 500px;
    background: antiquewhite;
    position: relative
  }

  .two {
    width: 100px;
    height: 100px;
    background: yellowgreen;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

3. flex

父元素用 display：flex，然后再用 justify-content: center，align-items: center，就OK了。

<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>

<style>
  .one {
    width: 500px;
    height: 500px;
    background: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .two {
    width: 100px;
    height: 100px;
    background: yellowgreen;
  }
</style>

以上方法的效果图如下：

Under-_-Taker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS】常见的元素水平居中和水平垂直居中

一. 水平居中1.行内元素父级元素用：text-align: center<body> <div class="one"> <span class="two">行内元素</span> </div></body><style> .one { width: 500px; height: 500px; background: antiquewhite; ...
复制链接

扫一扫