div的height、width设置为百分比之后如何让里面的元素垂直水平居中

最新推荐文章于 2022-09-06 15:21:13 发布

小青龙8085

最新推荐文章于 2022-09-06 15:21:13 发布

阅读量964

点赞数

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104031987

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

效果展示：

方法很简单，将父盒子display：table，将里面的内容display：table-cell，还有就是要把body，html宽高也设置为100%，要不然盒子的高度会出现问题。

<body>
	<div class="box"><span>box</span></div>
</body>

*{
    margin: 0;
    padding: 0;
}
body,html{
	width: 100%;
	height: 100%;
}
.box{
	width: 50%;
	height: 50%;
	border: 1px skyblue solid;
	text-align: center;
	vertical-align: middle;
	display: table;
}
.box span{
	display: table-cell;
	vertical-align: middle;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小青龙8085

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div的height、width设置为百分比之后如何让里面的元素垂直水平居中

效果展示：方法很简单，将父盒子display：table，将里面的内容display：table-cell，还有就是要把body，html宽高也设置为100%，要不然盒子的高度会出现问题。<body> <div class="box"><span>box</span></div></body>*{...
复制链接

扫一扫