前端实现水平竖直居中显示

我首先在body中创建一个div，id名为“mydiv”，class名为“center”，在mydiv样式中，我给div设置了宽度为100%，即为body的宽度，高度我随便设置了一下（实际开发中，很多情况下高度是不固定的）。然后center样式中添加了如下这三句话，即可使div中元素上下左右都居中。

align-items:center;
display: -webkit-flex;
justify-content:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #mydiv {
      width: 100%;
      height: 580px;
      background-color: #2ca1f4;
      color: white;
      font-size: 50px;
    }
 
    .center {
      align-items:center;
      display: -webkit-flex;
      justify-content:center;
    }
  </style>
</head>
<body>
  <div id="mydiv" class="center">
    哈哈哈哈
  </div>
</body>
</html>

原文链接：https://blog.csdn.net/u011295864/article/details/80675192

来源：https://www.cnblogs.com/striveJJC/p/11769272.html

标签

前端开发

前端

html居中

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!