div容器和容器内文字`水平垂直居中`

最新推荐文章于 2022-04-25 11:47:24 发布

追风少女

最新推荐文章于 2022-04-25 11:47:24 发布

阅读量899

点赞数 1

分类专栏： css 小白学前端

本文链接：https://blog.csdn.net/zyl_ziyinling/article/details/88037235

版权

小白学前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>center</title>
    <style>
      .div1{
        width: 200px;
        height: 200px;
        border:1px solid red;
        position: absolute; 
        top: 0; 
        left: 0; 
        bottom: 0; 
        right: 0; 
        overflow: auto; 
        margin: auto; 
      }
      .div2{
        width: 200px;
        height: 200px;
        background:black;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      .div2 span{
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2">
      <span>实现文字垂直居中</span>
    </div>
  </body>
</html>

优惠劵

追风少女

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div容器和容器内文字`水平垂直居中`

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>center</title> <style> .div1{ width: 200px; height: 200px;...
复制链接

扫一扫