日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

css實現水平居中和垂直居中，清除浮動

作者：Trine_cui 更新時間： 2022-07-21 編程語言

前言：元素一般分為 塊級元素 和 行內元素? ?

塊級元素可以設置高度，寬度，行內元素則不能，如果非要給行內元素設置寬高，只需要將 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 元素位于容器的中心設置彈性盒子元素在主軸（橫軸）的對齊方式*/

原文鏈接：https://blog.csdn.net/weixin_46253682/article/details/125101640

欄目分類
最近更新