Css中水平垂直居中的几种解决方法
2021-01-15 10:15
标签：top 水平 四种 splay 盒模型 模型 渲染 水平居中 position 在控制元素的水平、垂直居中问题时，有很多种解决方法，下面介绍几种解决办法： 第一种：css3的transform 第二种：flex盒子布局 第三种：display的table-cell 第四种：定位配合margin属性 Css中水平垂直居中的几种解决方法 标签：top 水平 四种 splay 盒模型 模型 渲染 水平居中 position 原文地址：https://www.cnblogs.com/abc-x/p/13393814.html水平垂直居中：
.ele{// 父元素
/*设置元素绝对定位*/
position:absolute;
/*top 50%*/
top: 50%;
/*left 50%*/
left: 50%;
/*css3 transform 实现*/
transform: translate(-50%, -50%);
}
.ele{// 父元素
/*弹性盒模型*/
display:flex;
/*主轴居中对齐*/
justify-content: center;
/*侧轴居中对齐*/
align-items: center;
}
.box{
/*让元素渲染为表格单元格*/
display:table-cell;
/*设置文本水平居中*/
text-align:center;
/*设置文本垂直居中*/
vertical-align:middle;
}
.ele{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
下一篇：clr via c# 程序集