摘要：居中问题居中问题定位不管用水平居中需要做如下处理定位不管用，水平居中需要做如下处理定位管用水平居中需要做如下处理定位管用，水平居中需要做如下处理定位加元素已知宽度定位加元素已知宽度父元素设置为子元素设置为距上，据左，然后减去元素自
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;position: relative;
display: flex;
flex-direction: column;
margin: 0 auto;父元素设置为：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;
}如果元素未知宽度，只需将上面例子中的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%);
}
.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;
}因为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%;
}如果是随屏幕变化，而居中的，也可以使用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基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小...
摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。 前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小...
摘要：像素像素是一个相对单位。相对不同屏幕，其实际像素大小不同。解决方案直接使用实现的终端适配有兴趣的小伙伴可以看下的解决方案使用实现手淘页面的终端适配地址移动端适配单位的坑你知道多少关于移动端布局的一些总结 网页尺寸单位 百分比（%） 英寸（in） 厘米（cm） 毫米（mm） 磅数（pt） 12 点活字（pc） 字母高度一半（ex） 父级字体（em） 像素（px） 根元素字体（rem） ...
摘要：相关内联格式上下文主要影响内布局的行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素都会共同生成一个行盒模型。 前言 通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。 如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。 ...
阅读 2702·2021-11-25 09:43
阅读 2084·2021-11-24 09:39
阅读 1952·2021-11-17 09:33
阅读 2748·2021-09-27 14:11
阅读 1838·2019-08-30 15:54
阅读 3223·2019-08-26 18:27
阅读 1263·2019-08-23 18:00
阅读 1810·2019-08-23 17:53
