css实现水平居中和垂直居中，清除浮动

最新推荐文章于 2024-05-30 22:05:00 发布

IT程序猿小翠不停走

最新推荐文章于 2024-05-30 22:05:00 发布

阅读量583

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_46253682/article/details/125101640

版权

前言：元素一般分为块级元素和行内元素

块级元素可以设置高度，宽度，行内元素则不能，如果非要给行内元素设置宽高，只需要将 display 属性设置为 inline-block 即可

一.水平对齐：

1、行内元素

给当前元素的父级元素设置,可以设置宽高  text-align:center   
子元素要设置成：display:inline-block或者display:inline

2、块级元素

该块级元素有固定的宽度 ，给该元素设置  margin : 0  auto   //有继承性

3、有无宽度均可试用，

1、position定位+transform: 
position: absolute;
 /* 使用transform在X轴方向移-50%，无需根据宽度计算 */
transform: translateX(-50%);
2、flex布局      //有继承性
display: flex;
justify-content: center;

二.垂直居中：

1、行内元素（单行）

·line-height 属性 设置的高度和父元素的高度相同即可

1-2行内元素（多行）

flex布局      //有继承性
display: flex;
align-items: center;

2-1块级元素（单个）

position: relative;  父亲
position: absolute;  子孙
transform: translateY(-50%);

2-2块级元素（多个）

3、有无宽高均可适用

<body>
    <div class="div1">
        <div class="div2">垂直居中</div>
    </div>
</body>

① 父盒子CSS样式设置伪类元素

基本思路：使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

<style>
    .div1 {
        height: 400px;
        background-color: rgb(177, 236, 247);
    }
    .div1::after{
        content:'';
        height:100%;
        display:inline-block;
        vertical-align:middle;
    }
    .div2{
        width: 250px;
        background-color: rgb(219, 166, 166);
        display:inline-block;
        vertical-align:middle;
        line-height: 200px;
    }
</style>

②  position + transform
<style>
    .div1{
        height: 400px;
        background-color: rgb(177, 236, 247);
        position: relative;
    }
    .div2{
        width: 250px;
        background-color: rgb(219, 166, 166);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        line-height: 200px;
    }
</style>

③ flex布局
<style>
    .div1{
        height: 400px;
        background-color: rgb(177, 236, 247);
        display: flex;
        align-items: center;
    }
    .div2{
        width: 250px;
        background-color: rgb(219, 166, 166);
        line-height: 200px;
    }
</style>

三、水平垂直居中

display: flex;
align-items: center;
justify-content: center;
//有继承性

四、对齐方式vertical-align、text-align、align-items、justity-content区别

vertical-align属性实现垂直居中,要实现div1父元素内的子元素div2，让div2实现垂直居中，我们可以这样设置：、

<style>
 .div1{
    display:table-cell;
    vertical-align:middle;
  }
 
  .div2{
      display:inline-block
  }
</style>
 
 
 
<div class="div1">
   <div class="div2"></div>
</div>

实现水平居中，比如我们要实现块状元素(block)内，子元素的水平居中;比如我们要实现div2元素在父元素div1内的居中;

<style>
  .div1{
      text-align:center
  }
  .div2{
      display:inline-block
  }
</style>
 
 
 
<div class="div1">
   <div class="div2"></div>
</div>

align-items: center与 justify-content: center

display: flex;
align-items: center; /* 弹性盒子flex 元素位于容器的中心设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。*/
justify-content: center; /* 弹性盒子flex 元素位于容器的中心设置弹性盒子元素在主轴（横轴）的对齐方式*/