前端面试中最常问到的垂直水平居中问题

hatlonely 发布于2019-08-30 15:54 / 3094人阅读

摘要：方法一和元素宽高未知的情况宽高未知方法二绝对定位和自身宽度一半，自身高度的一半已知宽高宽高已知方法三布局方法四被居中的元素是或者元素和元素方法五绝对定位和定高方法六父级高度和

方法一、 CSS3 transform和position(元素宽高未知的情况)


    宽高未知


.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    position:relative;
}
.box span {
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

方法二、绝对定位和margin-left:-自身宽度一半，margin-top: -自身高度的一半 (已知宽高)


    宽高已知


.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    position: relative;
}
.box span {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    text-align: center;
    line-height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    margin-left: -50px;
    margin-top: -50px;
}

方法三、 css3 flex布局


    


.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    display:flex;
    justify-content:center;
    align-items: center;
}
.box .child {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
}

方法四、被居中的元素是inline或者inline-block元素


    inline和inline-block元素


.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box .child {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
}

方法五、绝对定位和margin:auto


    定高


.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    position: relative;
}
.box .child {
    width: 100px;
    height: 100px;
    background: red;
    text-align: center;
    color: #fff;
    line-height: 100px;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

方法六、line-height: 父级高度和text-align: center


    line-height


.box {
    width: 400px;
    height: 400px;
    background: #ccc;
    line-height: 400px;
    text-align: center;
    font-size: 0;
}
.box .child {
    background: red;
    font-size: 14px;
    color: #fff;
}

GPU云服务器云服务器水平垂直居中面试问到 json 垂直居中实现垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117002.html

前端面试中最常问到的垂直水平居中问题

摘要：方法一和元素宽高未知的情况宽高未知方法二绝对定位和自身宽度一半，自身高度的一半已知宽高宽高已知方法三布局方法四被居中的元素是或者元素和元素方法五绝对定位和定高方法六父级高度和方法一、 CSS3 transform和position(元素宽高未知的情况) 宽高未知 .box { width: 400px; height: 400px; backgr...

ccj659 2019-08-02 11:36 评论0 收藏0
2019-我的前端面试题

摘要：先说下我面试情况，我一共面试了家公司。篇在我面试的众多公司里，只有同城的面问到相关问题，其他公司压根没问。我自己回答的是自己开发组件面临的问题。完全不用担心对方到时候打电话核对的问题。 2019的5月9号，离发工资还有1天的时候，我的领导亲切把我叫到办公室跟我说：阿郭，我们公司要倒闭了，钱是没有的啦，为了不耽误你，你赶紧出去找工作吧。听到这话，我虎躯一震，这已经是第2个月没工资了。公...

iKcamp 2019-08-23 17:52 评论0 收藏0
记录一次杭州顺网科技的面试过程

摘要：以上是面试中笔试涉及到的知识点或者后面被问到的只是点。也许是根据薪资和面试的等级来出题的。我刚面试完回家，吃了一个泡面，回忆下面试题。同时作为传递到构造函数，执行了一次让构造函数里面的属性和方法赋值了一份给。 css 如何水平垂直居中，请尽量多说几种方法？很尴尬，我多次面试都被问到这个问题，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...

shiguibiao 2019-08-30 14:13 评论0 收藏0
记录一次杭州顺网科技的面试过程

摘要：以上是面试中笔试涉及到的知识点或者后面被问到的只是点。也许是根据薪资和面试的等级来出题的。我刚面试完回家，吃了一个泡面，回忆下面试题。同时作为传递到构造函数，执行了一次让构造函数里面的属性和方法赋值了一份给。 css 如何水平垂直居中，请尽量多说几种方法？很尴尬，我多次面试都被问到这个问题，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...

caiyongji 2019-08-22 15:40 评论0 收藏0
我的前端面试

摘要：前言这次找工作也面了好几家公司，也通过了好几家公司的面试，毕竟之前也准备了一段时间，所以面试的时候心里也不是很虚。的代码分割怎么实现的说说刚才提到的和的区别前端缓存怎么实现扯扯强缓存和协商缓存，重点问了如何实现缓存二面就聊了项目。。。前言这次找工作也面了好几家公司，也通过了好几家公司的面试，毕竟之前也准备了一段时间，所以面试的时候心里也不是很虚。这里记录一下面试过程中被问到的问题...

meteor199 2019-08-26 13:29 评论0 收藏0