在不确定自身高度的情况下，用 CSS 实现元素垂直居中的3种方法

叁歲伎倆 2024-04-18 07:14 9阅读 0赞

镜像文章：[在不确定自身宽度的情况下，用 CSS 实现元素水平居中的2种方法][CSS _2]

**1.不知道自己高度的情况下, 利用绝对定位只需要以下三行（推荐）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]

<div class="parentElement">
        <div class="childElement">子元素垂直居中</div>
    </div>
      
    <style> .parentElement{ position: relative; height: 200px; background: blanchedalmond; } .childElement{ position: absolute; top: 50%; transform: translateY(-50%); } </style>

**2.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可**

<div class="parentElement">
        <div class="childElement">子元素垂直居中</div>
    </div>
      
    <style> .parentElement{ height:200px; background: blanchedalmond; } .childElement { position: relative; top: 50%; transform: translateY(-50%); } </style>

**3.不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸**

<div class="parentElement">
        <div class="childElement">子元素垂直居中</div>
    </div>
      
    <style> .parentElement{ display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/ height: 200px; background: blanchedalmond; } </style>

**4.表格居中，除了IE6/7都支持**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]

<div class="parentElement">
        <div class="childElement">子元素垂直居中</div>
    </div>
      
    <style> .parentElement { display: table; height: 200px; background: blanchedalmond; } .childElement { text-align: center; display: table-cell; vertical-align: middle; } </style>

**5.inline-block**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 2]

<div class="parentElement">
    	<div class="content">我是内容<br />我也是内容</div>
    	<div class="actor">我不显示</div>
    </div>
      
    <style> .parentElement { height: 200px; background: blanchedalmond; } .content { display: inline-block; vertical-align: middle; } .actor { display: inline-block; vertical-align: middle; height: 200px; /* 和父容器高度相同 */ font-size: 0; } </style>

[CSS _2]: https://blog.csdn.net/HuangsTing/article/details/102601361
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/897afd7a0b4641e0be56353c70732eb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/04ad5f85ef104422b269c8fc3ce08562.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4a790e96d7cd45d7ae0a00a6f730c3ba.png