css块级元素居中显示

最新推荐文章于 2024-09-15 08:58:58 发布

又1个晴天

最新推荐文章于 2024-09-15 08:58:58 发布

阅读量238

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Shasha_Bai/article/details/112856873

版权

CSS块级元素居中显示

<div class="parent">
    <div class="child">居中</div>
</div>

水平居中

1.子控件确定宽度

.parent{
    width: 600px;
    height: 600px;
    background-color: yellow;
    }
.child{
    width: 300px; 
    height: 300px;
    background-color: aqua;
    margin: 0 auto;
	}

在这里插入图片描述

2.子控件不确定宽度

需要居中的元素宽度不确定，根据它的内容撑开。

.parent{
    width: 600px;
    height: 600px;
    background-color: yellow;
    position: relative;
    }
.child{
    position: absolute;
    left: 50%;
    background-color: aqua;
    transform: translate(-50%)
    }

在这里插入图片描述

垂直居中

1.子控件确定高度

.parent{
     width: 600px;
     height: 600px;
     background-color: yellow;
     position: relative;
     }
 .child{
      width: 300px;
      height: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: aqua;
      margin-top: -150px;
      margin-left: -150px;
      }

在这里插入图片描述

2.子控件不确定高度

需要居中的元素高度不确定，根据它的内容撑开。

.parent{
    width: 600px;
    height: 600px;
    background-color: yellow;
    position: relative;
    }
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: aqua;
    transform: translate(-50%,-50%)
    }