3种水平垂直的方式
程序员文章站
2022-03-18 16:33:27
1 绝对定位 + 转换 2 弹性模型 3 单元格方式 ......
1 绝对定位 + 转换
<div class="parent"> <div class="child">绝对定位 + 转换</div> </div>
.parent { position: relative; width: 400px; height: 400px; background: skyblue; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: pink; }
2 弹性模型
<div class="parent"> <div class="child">弹性模型</div> </div>
.parent { display: flex; justify-content: center; align-items: center; width: 400px; height: 400px; background: skyblue; } .child { width: 200px; height: 200px; background: pink; }
3 单元格方式
<div class="parent"> <div class="child">单元格方式</div> </div>
.parent { display: table-cell; text-align: center; vertical-align: middle; width: 400px; height: 400px; background: skyblue; } .child { display: inline-block; width: 200px; height: 200px; background: pink; }
上一篇: trait
推荐阅读
-
css垂直居中的几种方式_html/css_WEB-ITnose
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose
-
转载未知大小的图片在一个已知大小容器中的水平和垂直居中(二)
-
android listview 水平滚动和垂直滚动的小例子
-
如何使用Matrix对bitmap的旋转与镜像水平垂直翻转
-
详解Android使GridView横向水平滚动的实现方式
-
android listview 水平滚动和垂直滚动的小例子
-
详解Android使GridView横向水平滚动的实现方式
-
如何使用Matrix对bitmap的旋转与镜像水平垂直翻转
-
子盒子在父盒子内保持垂直水平居中的多种方案--已知子元素高度、未知子元素高度