继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Web前端基礎知識

高慕程
关注TA
已关注
手记 23
粉丝 2
获赞 20

前端初學者,小白白一枚,都是靠自己學習的,若有問題,請多指教。

整理一下在很多面試題上面看到一道題:

將一個元素垂直水平居中:

1.若元素未知寬高或已知寬高:

將元素的父元素設置為:display:flex;justify-content:center;align-items:center;并設置父元素的寬高即可:

如:

<style>
html{
width: 100%;
height: 100%;
display:flex;
justify-content:center;
align-items:center;
}
#box{
background-color:red;
}
</style>
<body>
<div id="box">未知寬高</div>
</body>

2.若是一個已知寬高的元素也可以這樣:將父元素CSS設置為:position:relative;并設置其寬高;

將這個元素:設置寬高,position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;

<style>
html{
width:100%;
height:100%;
position:relative;
}
#box{
background-color:red;
width:100px;
height:100px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
</style>
<body>
<div id="box">已知寬高</div>
</body>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP