前端面试题：如何让一个不定宽高的DIV，垂直水平居中？

最新推荐文章于 2024-07-14 10:25:44 发布

桶面

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量817

点赞数 4

分类专栏：前端面试题文章标签： css html css3 js html5

本文链接：https://blog.csdn.net/weixin_45550048/article/details/103638566

版权

前端面试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

两种解决办法：

第一种：让一个不定宽高的div在整个网页中水平垂直居中

HTML部分

<body>
<div>我是没有宽高的div，靠内容撑开</div>
</body>

CSS部分

<style>
div {
	/* 1.设置定位 */
	position:absolute;
	/* 2.x,y轴走网页的一半 */
	left:50%;
	top:50%
	/* 3.往回走自身x，y的一半 */
	transform：translate(-50%,-50%);
</style>

第二种：让一个不定宽高的div在父盒子中垂直水平居中

HTML部分

<body>
    <div class="father">
        <div class="son">我没有宽高，我被内容撑开</div>
    </div>
</body>

CSS部分

<style>
.father {
		/* 1.父盒子是有宽高的 */
        width: 500px;
        height: 500px;
        /* 2.添加flex属性*/
        display: flex;
        /* 3.设置水平垂直居中*/
        justify-content: center;
        align-items: center;
        }
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

桶面

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端面试题：如何让一个不定宽高的DIV，垂直水平居中？

两种解决办法：第一种：让一个不定宽高的div在整个网页中水平垂直居中HTML部分<body><div>我是没有宽高的div，靠内容撑开</div></body>CSS部分<style>div { /* 1.设置定位 */ position:absolute; /* 2.x,y轴走网页的一半 */ left:50%...
复制链接

扫一扫