方法一（varticle-align）
理念
使用表格单元格的中心属性。
步骤
将div放置在父div之外，同时将其设定为“显示：表”。 宽度是100%
父div被设定为表的单元格元素(显示：表单元格)
父div将属性“垂直对齐：中间”设置为子div位于上下中心
子div以margin配置位于左右中央(margin-left:auto； 边缘光：自动)
例子
样式
* * {马克龙：0； 填充： 0； 盒子缩放：边框； }
.表{显示：表}； width :百分之百； }
. father {显示：表单元}； 垂直对齐：中间； }
. son { margin :自动； }
/样式
主体
div类='表'
divclass=' father ' style=' width :100 %； height: 400px； border :1 pxsolidrebeccapurple；'
divclass=' son ' style=' width :100 px； height: 100px； 背景：地块绿色；' /div
/div
/div
/body注：
的单元格特殊，如果只有一个单元格，则缺省情况下，其宽度为父(table|tr )宽度的100%；
table的缺省宽度不会增加。 width:100%；
方法二(line-height)
理念
如果父div的行高于自己的高度，则内部文字间元素将显示在上下中心。 行中块的高度不固定时，也会显示在上下中央。 文本居中对齐属性text-align:center允许在左右居中显示行内元素或行内块元素。
步骤
子div是内联模块要素(display :内联模块)；
父div设定行高，使子div位于上下中心
父div配置文本的中心(text-align:center )将子div放置在左右中心。
斯泰尔斯
* * {马克龙：0； 填充： 0； 盒子缩放：边框； }
. father {line-height: 500px 文本对齐：中心； 字体大小：0； }
. son {显示：在线模块}；
/*显示器：线上d性；
显示：在线网格；
显示器：在线表； */
}
/样式
主体
divclass=' father ' style=' width :100 %； height: 400px； border :1 pxsolidrebeccapurple；'
divclass=' son ' style=' width :100 px； height: 100px； 背景：地块绿色；' /div
/div
/body注意：如果将行高设置为当前父div的高度(400px )，则具有固定高度的子div不会显示在中间。 问题是，默认情况下，浏览器位于文本的中心，即作为文本的一部分。 (颜色缺省字体大小：16 px； hight:21px () )进行了定中，设为高度100px，没有进行定中。 所以有必要调整父div的线高度。 字体大小：0 (对应的字体高度为0 )时，在线高度上显示副div的高度(400px 100px； 中显示了当前的缩放比例。
方法三（定位）
理念
使用定位属性(顶部、左侧、右侧、底部)百分比的模式。 100%时，表示偏移的长度
为父div的高度（宽度）的100%。
步骤
父div标记下定位（position:relative|absolute|fixed）子div绝对定位（position:absolute）
子div上下居中：top:50%margin-top:-h/2或是 bottom:50%margin-bottom:-h/2；
子div左右居中: left:50%margin-left:-w/2 或是 right:50%margin-right:-w/2；
例子
<style>* {margin: 0padding: 0box-sizing: border-box} .father {position: relative} .son {position: absolutebottom:50%margin-bottom: -50pxleft: 50%margin-left: -50px} </style><body><div class="father" style="width: 100%height: 400pxborder: 1px solid rebeccapurple"><div class="son" style="width: 100pxheight: 100pxbackground: palegreen"></div></div></body>
方法四（定位）
理念：
定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置margin:auto会使它居中显示。
步骤：
父div标记下定位（position:relative|absolute|fixed|sticky）子div绝对定位（position:absolute）
子div上下居中：top:0bottom:0margin-top:automargin-bottom:auto
子div左右居中：left:0right:0margin-left:automargin-right:auto
例子
<style>* {margin: 0padding: 0box-sizing: border-box} .father {position: relative} .son {position: absolutetop: 0bottom:0left: 0right: 0margin: auto} </style><body><div class="father" style="width: 100%height: 400pxborder: 1px solid rebeccapurple"><div class="son" style="width: 100pxheight: 100pxbackground: palegreen"></div></div></body>
方法五（flex）
理念
d性盒子，自带的一个居中功能
例子
<style>* {margin: 0padding: 0box-sizing: border-box} .father {display: flexalign-items: center} .son {margin: auto} </style><body><div class="father" style="width: 100%height: 400pxborder: 1px solid rebeccapurple"><div class="son" style="width: 100pxheight: 100pxbackground: palegreen"></div></div></body>
flex兼容性，以及存在的已知问题
首先你这个问题问得不够准确，你说html中有四个盒子，但是你没有说明盒子的关系，它们是嵌套的？并列的？如果是一个一个的嵌套的，例如
<div class="box"
<div>
<div>
<div class="box-content">最里层</div>
</div>
</div>
</div>
像这样的最里面的获取方法有很多种：可以直接给一个类名
.box-content{ text-align:center}
或者通过最外层利用父子关系来选择到他，如：
.box>div>div>div{text-align:center}
或者：.box>div>div>.box-content {text-align:center}
或者：.box .box-content {text-align:center}
方法有很多，其他得你自己研究一下吧
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）