（css）div中内容垂直居中

原创已于 2022-02-10 11:37:16 修改 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2022-02-10 11:36:07 首次发布

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了四种CSS方法来实现元素的垂直居中：1) 使用line-height和padding；2) 利用display:table-cell和vertical-align:middle模拟表格布局；3) 应用css3的transform属性；4) 使用flex布局。这些方法覆盖了单行文字、多行内容及复杂布局的垂直居中需求。

一、常用单行文字居中（line-height/padding）

二、模拟表格方式 ***

三、css3 transform

四、flex布局

一、常用单行文字居中（line-height/padding）

p{ height:30px; line-height:30px; width:100px; overflow:hidden; }

p { padding:20px 0; }

二、模拟表格方式 ***

父组件设置 display: table; 子组件设置 display: table-cell; vertical-align: middle

<div style="display: table">
    <div style="display: table-cell; vertical-align: middle">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </div>
</div>

三、css3 transform

.content{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}

四、flex布局

.flex{
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    
    text-align: justify;
    width:200px;
    height:200px;
    background: #000;
    margin:0 auto;
    color:#fff;
}