HTML5+CSS3-基础09-盒子水平和垂直居中

最新推荐文章于 2022-02-17 21:57:51 发布

wuCase

最新推荐文章于 2022-02-17 21:57:51 发布

阅读量178

点赞数

文章标签： css html flex css3

本文链接：https://blog.csdn.net/weixin_47402645/article/details/105815458

版权

HTML5+CSS3-基础09-盒子水平和垂直居中

利用position和translate
利用position和margin
利用父元素的flex布局
利用display：table-cell
对子盒子实现绝对定位，利用calc计算位置

利用position和translate

利用子绝父相父元素和子元素进行定位，然后用transform的translate

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%);
当前div的父级添加相对定位（position: relative;）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
      position:relative;
      top: 0;
      left: 0;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

在这里插入图片描述

利用position和margin

绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
      position:relative;
      top: 0;
      left: 0;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
      position:absolute;
      top: 50%;
      left: 50%;
      margin:-100px -100px;
    }
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

在这里插入图片描述

利用父元素的flex布局

父元素设置flex布局，然后alig-items：center（垂直居中）； justify-content：center（水平居中）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
     
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

在这里插入图片描述

利用display：table-cell

父元素设置：
display: table-cell;
vertical-align: middle;
text-align: center;

子元素设置： display：inline-blaock；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
      display: inline-block;
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">sfs</div>
  </div>
</body>
</html>

在这里插入图片描述

对子盒子实现绝对定位，利用calc计算位置

父元素设置：
position: relative;

子元素设置：
position: absolute;
left:calc((500px - 200px)/2);
top:calc((120px - 50px)/2);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
     position: relative;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
      position: absolute;
      top: calc((400px - 200px)/2);
      left: calc((400px - 200px)/2);
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">sfs</div>
  </div>
</body>
</html>

在这里插入图片描述

内容仅供学习参考，若有错误欢迎大家指正----WUCASE

wuCase

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3-基础09-盒子水平和垂直居中

HTML5+CSS3-基础09-盒子水平和垂直居中利用position和translate利用position和margin利用父元素的flex布局利用display：table-cell对子盒子实现绝对定位，利用calc计算位置利用position和translate利用子绝父相父元素和子元素进行定位，然后用transform的translate绝对定位方法：不确定当前div的宽度和...
复制链接

扫一扫