记录居中的三种方法

mrsrounder

于 2022-08-03 21:28:53 发布

阅读量121

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_38552097/article/details/126149309

版权

<html>
<style>

/* first method
body{
    text-align:center;
    width:100%;
    height:100%;
}
div{
position:absolute;
background-color:grey;
padding:2% 2%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

*/
/* second method
body{

    text-align:center;
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items: center;
}
*/
/*
body{

    text-align:center;
    width:100%;
    height:100vh;
    display:grid;
    justify-content:center;
    align-items: center;
}
 
*/

</style>
<body>
<div>
<h1>text that want center</h1>

</div>
</body>
</html>