[CSS]中子元素在父元素中居中

嗓子疼谁心疼2024-03-29 11:12

元素居中

对于当行文字居中，比较简单，设置text-align:center和text-height为盒子高度即可

对于父元素中子元素居中，要实现的话有以下几个方法

方法1：利用定位+margin：auto

html 复制代码

<style>
  .father {
    width: 500px;
    height: 300px;
    border: 1px solid #0a3b98;
    position: relative;
  }

  .son {
    width: 100px;
    height: 40px;
    background: #f0a238;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:auto;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

父元素中relative相对定位，子元素absolute绝对定位，并设置top，left，right，bottom为0，并设置margin:auto

方法2：利用定位+margin：负值

html 复制代码

<style>
 .father {
 position: relative;
 width: 200px;
 height: 200px;
 background: skyblue;
 }
 .son {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left:-50px;
 margin-top:-50px;
 width: 100px;
 height: 100px;
 background: red;
 }
</style>
<div class="father">
 <div class="son"></div>
</div>

父元素中relative相对定位，子元素absolute绝对定位，并设置top，left为50%，并设置margin-left和margin-top为盒子大小的一半-50px（这种情况需要知道盒子大小）

方法3：利用定位+transform

html 复制代码

<style>
 .father {
 position: relative;
 width: 200px;
 height: 200px;
 background: skyblue;
 }
 .son {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 100px;
 height: 100px;
 background: red;
 }
</style>
<div class="father">
 <div class="son"></div>
</div>

父元素中relative相对定位，子元素absolute绝对定位，并设置top，left为50%，并使用transform移动-50%，transform: translate(-50%,-50%); 此方法不需要知道盒子大小

方法4：利用flex

html 复制代码

<style>
 .father {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 200px;
 height: 200px;
 background: skyblue;
 }
 .son {
 width: 100px;
 height: 100px;
 background: red;
 }
</style>
<div class="father">
 <div class="son"></div>
</div>

使用flex布局，设置justify-content: center; 水平居中 align-items: center;设置垂直居中