常见面试题—css实现垂直水平居中

gougoujiang 发布于2019-08-29 15:40 / 1103人阅读

摘要：常见面试题实现垂直水平居中前言面试中常常被问到，如何使用来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常会有垂直水平居中的需求。

常见面试题—css实现垂直水平居中 前言

面试中常常被问到，如何使用css来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常会有垂直水平居中的需求。

css实现垂直水平居中的三种方案

1.容器内元素display:inline/inline-block

这种情况就比较容易了，直接设置容器的text-align就可以实现内容元素的水平居中，设置垂直居中的话要设置容器的高度，然后设置容易的line-height===height就可以，如下：

     
        this is text

    .container{
        text-align: center;
        height: 50px;
        background: green;
        line-height: 50px;
    }

2.容器内元素display:block,且元素宽高已知

这种情况下我们使用position这个属性结合设置偏移来实现。首先设置容器的position:relative,设置元素position为absolute，然后设置元素（.inner-box）的偏移top,left,margin-top,margin-left,其中，top，left设置为50%,而margin-top/margin-left的偏移量均为本身元素高/宽的一半，为负值。

代码如下：

    .container {
        height: 200px;
        width: 200px;
        background: pink;
        position: relative;
    }

    .inner-box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        height: 100px;
        width: 100px;
        background: green;
    }

3.容器内元素display:block,且元素宽高未知

这种方法与方法二类似，但是不同的是不能通过设置margin-top/left偏移来达到效果了，因为容器内元素的宽高是未知的。这次我们通过设置left/top/bottom/right:0,然后设置margin:auto。
代码如下：

    .container {
            height: 200px;
            width: 200px;
            background: pink;
            position: relative;
        }

    .inner-box {
        position: absolute;
        height: 100px;
        width: 100px;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background: green;
    }

后话

实现垂直水平居中的方式有多种，通过设置translate，或者使用flex布局也是可以的，但是以上写的几种方法是兼容性比较好的。如果有不足，欢迎这位大佬指出。

GPU云服务器云服务器 js常见面试题水平垂直居中实现垂直居中垂直居中

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

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

前端常见面试题（实战遇到）

摘要：浏览器内核常用的块元素和内联元素数据类型语句前端优化方法会话跟踪方法和区别循环输出网站优化清除浮动方法，优缺点和区别截取长文本写方法截取字符串响应式布局浏览器兼容正则表达式验证身份证源码自己如何封装一个固定一个按钮在右下角画一个三角形同步和 1、浏览器内核2、常用的块元素和内联元素3、数据类型 *4、SQL语句5、前端优化方法 *6、会话跟踪方法 *7、display ： none 和...

时飞 2019-08-23 16:13 评论0 收藏0
css-flex常见面试题

摘要：废话不多说内容宽度等分左右布局，一侧定宽，一侧自适应撑满固定宽度自适应宽度未知高宽上下左右居中未知高度上下左右居中这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。废话不多说！ flex-内容宽度等分 //css .box { display: flex; } .box div { ...

ZweiZhao 2019-08-30 15:55 评论0 收藏0
css-flex常见面试题

摘要：废话不多说内容宽度等分左右布局，一侧定宽，一侧自适应撑满固定宽度自适应宽度未知高宽上下左右居中未知高度上下左右居中这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。废话不多说！ flex-内容宽度等分 //css .box { display: flex; } .box div { ...

Godtoy 2019-08-02 14:12 评论0 收藏0
常见面试题之左边固定，右边自适应布局(四种方法：负边距、flex)

摘要：这个布局是最简单的布局之一，但是网络上大多是，而没有认真解释以及用新的特性实现。这个布局是最简单的布局之一，但是网络上大多是copy，而没有认真解释以及用新的特性实现。下面就做一个新的概括. 要求：左边固定100px, 右边自适应左position:absolute, 右margin-left 入门写法左边固定1 左边固定2 左边固定3 右边自适应1 右边自适应...

hot_pot_Leo 2019-08-29 13:02 评论0 收藏0