每日一题: 元素水平垂直居中的方式有哪些？

learning 发布于2019-08-23 14:55 / 2196人阅读

摘要：问元素水平垂直居中的方式有哪些加方案加方案方案行内元素方案弹性布局方案未知元素宽高解决方案加方案加方案方案行内元素方案弹性布局方案未知元素宽高解决方案关于每日一题每日一题可以看成是一个语音答题社区每天利用碎片时

20190119问:

元素水平垂直居中的方式有哪些？

absolute加margin方案

fixed 加 margin 方案

display:table 方案

行内元素line-height方案

flex 弹性布局方案

transform 未知元素宽高解决方案

absolute加margin方案

    div{
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%:
        margin-top: -50px;
        margin-left: -50px;
    }

fixed 加 margin 方案

    div{
        position: fixed;
        width: 100px;
        height: 100px;
        top: 0;
        right:0;
        left: 0;
        bottom: 0;
        margin: auto;
    }

display:table 方案

    div{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 100px;
        height: 100px;
    }

行内元素line-height方案

    div{
        text-align: center;
        line-height: 100px;
    }

flex 弹性布局方案

    div{
        display: flex;
        align-items: center;
        justify-content:center
    }

transform 未知元素宽高解决方案

    div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

搜索微信公众号：JS每日一题

云服务器 GPU云服务器水平垂直居中 html的水平居中服务器托管的方式有哪些特点垂直居中

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

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

JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

摘要：问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存，并且在多用户间共享响应只作为私有的缓存， 20190116问: 前端的缓存有哪些？都适用什么场景？区别是什么？参考回答前端缓存分为两部分: http 缓存浏览器缓存 http 缓存强...

MockingBird 2019-08-30 15:55 评论0 收藏0
JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

摘要：问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存，并且在多用户间共享响应只作为私有的缓存， 20190116问: 前端的缓存有哪些？都适用什么场景？区别是什么？参考回答前端缓存分为两部分: http 缓存浏览器缓存 http 缓存强...

lolomaco 2019-08-23 14:56 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

zacklee 2019-08-30 15:55 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

lbool 2019-08-23 14:52 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

Alex 2019-08-02 14:09 评论0 收藏0