小结——居中问题的解决

darkbaby123 发布于2019-04-23 11:56 / 1705人阅读

摘要：居中问题居中问题定位不管用水平居中需要做如下处理定位不管用，水平居中需要做如下处理定位管用水平居中需要做如下处理定位管用，水平居中需要做如下处理定位加元素已知宽度定位加元素已知宽度父元素设置为子元素设置为距上，据左，然后减去元素自

居中问题：

1.Fixed定位margin：0 auto;不管用，水平居中需要做如下处理：

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

2.relative定位margin：0 auto;管用，水平居中需要做如下处理：

position: relative;
display: flex;
flex-direction: column;
margin: 0 auto;

3.absolute定位加margin 元素已知宽度

父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现


    
    


.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

4.absolute定位加transform 元素未知宽度

如果元素未知宽度，只需将上面例子中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);


    
    


.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

5.flex布局 (存在兼容性问题)


    
    


.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

6.able-cell布局

因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用


    
        
        
    


.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

7.js的事件监听也可以（css可以实现的不推荐使用，出于性能问题考虑）

如果是随屏幕变化，而居中的，也可以使用js

//1.监听轮播左移动距离
window.addEventListener("resize",changeDivLeft,false)
function changeDivLeft(){               
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var leftRange = (w-1920)/2;//1920是图片容器宽度
//  console.log(w,leftRange);
    $(".swiper-container").css({"left":leftRange});   
}

//2.可简化改版为自执行函数
(function(){
    window.onresize = arguments.callee;
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var leftRange = (w-1920)/2;//1920是图片容器宽度
    $(".swiper-container").css({"left":leftRange});   
})();

混合云专线服务解决问题的方法云计算解决的问题短视频问题的解决措施数据分析解决的问题

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

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

垂直水平居中方法小结

摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小...

amuqiao 2019-08-29 17:00 评论0 收藏0
垂直水平居中方法小结

摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小...

xcc3641 2019-08-02 11:44 评论0 收藏0
水平垂直居中小结

摘要：相等的上下值三水平垂直居中绝对定位和负外边距使用绝对定位实现水平垂直居中时，元素的和应该等于对应的和值的一半再取负值。相对定位或绝对定位均可绝对定位和布局能实现居中效果的方法还有很多，这里列出来的方法只是一小部分，日后会慢慢补充。我们在页面布局中经常会遇到需要将内容水平/垂直居中的情况，现在我们就来梳理一下实现的方法。一、水平居中 1.行元素设置其父元素的text-alig...

xuxueli 2019-08-29 16:35 评论0 收藏0
网页单位和rem使用小结

摘要：像素像素是一个相对单位。相对不同屏幕，其实际像素大小不同。解决方案直接使用实现的终端适配有兴趣的小伙伴可以看下的解决方案使用实现手淘页面的终端适配地址移动端适配单位的坑你知道多少关于移动端布局的一些总结网页尺寸单位百分比（%）英寸（in）厘米（cm）毫米（mm）磅数（pt） 12 点活字（pc）字母高度一半（ex）父级字体（em）像素（px）根元素字体（rem） ...

王岩威 2019-08-29 15:26 评论0 收藏0
CSS 行内布局实践小结

摘要：相关内联格式上下文主要影响内布局的行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素都会共同生成一个行盒模型。前言通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。 ...

Taste 2019-08-28 18:13 评论0 收藏0