Code前端首页关于Code前端联系我们

CSS设置的水平和垂直居中解决方案总结

terry 2年前 (2023-09-27) 阅读数 95 #数据结构与算法

在一家公司面试时,被问及垂直居中方法。我只回答了三个选项:margin、table cell 和 flex。回来后,我感到非常羞愧,所以我把中间的计划整理出来并提出来。我希望它对每个人都有用。
如有错误,请指正。非常感谢。

块级元素在html代码部分居中

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

行内元素在html代码部分居中

<div class="parent">
   <span class="child">child</span>
</div>

水平居中

01行内元素text-level02居中; elements margin: auto;

(低版本浏览器还需要设置text-align: center;)

.parent {
    text-align: center; 
}
.child {
    margin: auto; 
    border: 1px solid blue;
}

由于本文主要是要注册垂直居中方案,所以其他水平和垂直方案也不会注册这里很多。

垂直居中

01 行内元素(单行文本垂直居中):设置行高=高度

.parent {
   height: 200px;
   line-height: 200px;
   border: 1px solid red;
}

02 块级元素:绝对位置(必须提前知道大小)

优点:兼容性好
缺点:需要提前知道尺寸,margin-top:-(高度的一半); margin-left: -(半角);

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

03 块级元素:绝对定位+变换

优点:不需要提前知道知道大小
缺点:兼容性差

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

04 - level 元素:绝对定位 + margin: auto;

优点:不需要提前知道尺寸,兼容性好
缺点:这个方法是我最喜欢的,是我喜欢用的一种,但是不知道怎么样缺点还没有。 ?适用于某些特定情况)。?有哪些好的解决方案? - Gino 回复 - 知乎
张新旭老师的博客也提到:
更多展示:我所知道的表格单元格应用

.parent {
    height: 300px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    /* *display: block;
    *font-size: (heightX0.873);
    *font-family: arial; */
}

也适合多行文本垂直居中 CSS 代码:

.parent {
    width: 400px;
    height: 300px;
    display: table-cell;        
    vertical-align: middle;
    border: 1px solid red;
}
.child {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

07 块级元素:显示:flex

缺点:兼容性差

.parent {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;  /*水平居中*/
}
.child {
    background: blue;
}

08 块级元素:伪元素

这个解决方案始于我在:c经典应用示例中看到的这篇文章

.parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.child {
    background: blue;
    width: 100px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.parent::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;            
}

09块级元素:calc()

不推荐这样做,但它仍然是一种方法。
缺点:兼容性差,需要计算。 ? table之类的标签有点多余,结构也变了。

作者:Suplum
链接:https://juejin.im/post/5a7a9a545188257a892998ef
来源:掘金属于作者所有。商业转载请联系作者获取授权。非商业转载请注明来源。

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门