最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法
下面说两种在屏幕正中(水平居中+垂直居中)的方法
放上示范的html代码:
<body>
<div class="main">
<h1>MAIN</h1>
</div>
</body>
方法一:
div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。
.main{
text-align: center; /*让div内部文字居中*/
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
---------------------
作者:qq_32623363
来源:CSDN
原文:https://blog.csdn.net/qq_32623363/article/details/77101971
版权声明:本文为博主原创文章,转载请附上博文链接!