前端面试之CSS垂直居中的常见方法

最新推荐文章于 2024-08-28 22:07:19 发布

菊子橘子

最新推荐文章于 2024-08-28 22:07:19 发布

阅读量88

点赞数

分类专栏：前端相关知识

本文链接：https://blog.csdn.net/m0_48554131/article/details/117624752

版权

前端相关知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了四种网页元素垂直居中的布局技术：padding布局、line-height布局、flex布局和定位方式布局。每种方法都有其独特优势和适用场景，如padding简单但需灵活处理父元素高度，line-height适合单行文本，flex布局适用于多行内容且兼容性较好，而定位方式则可能使元素脱离正常文档流。了解这些方法可以帮助开发者更好地实现网页元素的垂直居中效果。

摘要由CSDN通过智能技术生成

使用padding布局：

<style type="text/css">
    .padding{
        width: 200px;
        border: 1px solid red;
        padding-top: 50px;
        padding-bottom: 50px;
        text-align: center;
    }
</style>
<body>
    <div class="padding">
        <span>padding垂直居中</span>
    </div>
</body>
实现效果：

优点：简单：只需设置内边距

缺点：父元素不能设置固定高度

使用line-height布局

<style type="text/css">
   .lineHeight{
    width: 200px;
    height: 100px;
    border: 1px solid black;
}
.lineHeight p{
    margin: 0;
    text-align: center;
    line-height: 100px;
}
</style>
<body>
  <div class="lineHeight">
    <p>lineHeight垂直居中</p>
  </div>
</body>
实现效果：

优点：可设置父元素的固定高度；
缺点：不适合多行文字

使用flex布局

.flex{
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid cadetblue;
}
</style>
<body>

<div class="flex">
    <p>使用flex弹性布局</p>
    <p>实现多行文字居中</p>
</div> 
</body>

实现效果：

优点：简单易懂；缺点：兼容性问题，要IE9以上浏览器才能兼容

使用栅格布局

.table ul{
    /*使用栅格布局*/
    width: 1350px;
    height: 200px;
    border: 1px solid rosybrown;
    display: grid;
    /*grid适合多行多列，大范围的布局*/
    grid-template-columns: repeat(5,1fr);
    align-items: center;
    justify-content: center;
} 
</style>
<body> 
<div class="table">
    <ul>
        <li>快乐大本营</li>
        <li>天天向上</li>
        <li>奔跑吧，兄弟</li>
        <li>极限挑战</li>
        <li>向往的生活</li>
    </ul>
</div>
 </body>
实现效果：

优点：布局很6；缺点：兼容性问题，上手难度高

使用定位方式布局

.position{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid goldenrod;
}
.position p{
    margin: 0;
    position: absolute;
    top:50%;
    margin-left: 50%;
    transform: translate(-50%);
}
</style>
<body> 
<div class="position">
    <p>定位元素居中1<p>
</div>
 </body>

实现效果：