定位元素垂直居中,水平居中

可爱滴菜鸟

于 2020-10-15 16:26:52 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/weixin_48802738/article/details/109099719

css 专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了如何利用CSS将子元素在父元素内实现垂直居中。主要方法包括设置`position:absolute`，然后配合`top:50%`，`transform:translateY(-50%)`。此外，还提到了其他居中方式，如`translateX(-50%)`和`transform:translate(-50%,-50%)`，为开发者提供了多种选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <style>
    .father{
        width:100%;
        height:200px;
        position: relative;
      }
    .son{
        position: absolute;
        top: 50%;  //距离父元素高度
        right:50%; //距离父元素右边的距离
        transform: translateY(-50%); //垂直居中,向上移动自身距离的50%
        //transform: translateX(-50%); //水平居中,向左移动自身距离的50%
        //transform: translate(-50%,-50%); //水平垂直都居中
      }
   </style>

    <body>
          <div class="father">
              <div class="son"> </div>
          </div>
    </body>