css子元素完美居中的四种方法

最新推荐文章于 2023-02-28 17:27:52 发布

淘淘淘_淘钱端

最新推荐文章于 2023-02-28 17:27:52 发布

阅读量3.3k

点赞数 2

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/yu_uy88/article/details/108172331

版权

css子元素完美居中的四种方法

弹性盒子实现居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子完美居中</title>
    <style>
      .con {
   
        width: 300px;
        height: 300px;
        border: 1px solid red;
        margin: 100px auto;
        display: flex;
        justify-content: center; /*水平方向的居中*/
        align-items: center; /*垂直方向的居中*/
      }
      .box {
   
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

淘淘淘_淘钱端

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css子元素完美居中的四种方法

css子元素完美居中的四种方法弹性盒子实现居中<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>盒子完美居中</title> <style
复制链接

扫一扫