CSS3 水平居中和垂直居中方式整合

本文轉載自查看原文 2018-12-21 17:08 632 css3

實現居中的方式分為水平和垂直，接下來對兩種方式進行整體的整合

水平居中

水平居中需要滿足兩個條件：父級元素為塊級元素且設置寬度

1.子元素為任意元素，但未設置寬度

<body>
    <div class="wrap">
          <p class="center">快把我變居中<p/>
    </div>            
</body>

.wrap{
     width:300px;
     height:300px;      
     background:gray;
}

.center{
      text-align:center;    
}

效果如下圖：

2.子元素為任意元素，並設定了寬度

margin

<body>
    <div class="wrap">
          <p class="center">margin<p/>
    </div>            
</body>

.wrap{
     width:300px;
     height:300px;
     background:gray; 
}

.center{
     margin:0 auto; 
　　　width:100px;
   
}

效果圖如下：

padding-left和padding-right

我們還可以通過計算父元素和子元素寬度之差，（父寬-子寬）/2，得出父元素的padding-left或者padding-right

<div class="wrap">
    <div class="center">快把我變居中</div>
</div>
</body>

.wrap{
    width:300px;
    height:300px;
    background: gray;
    box-sizing: border-box;
    padding-left: 100px;
}

.center{
    color: beige;
    box-sizing: border-box;
    width: 100px;
}

效果如圖:

計算子元素的margin-left或margin-right

計算子元素的方式和計算父元素的方式相同

<div class="wrap">
    <div class="center">margin-left</div>
</div>

.wrap{
    width:300px;
    height:300px;
    background: gray;
    box-sizing: border-box;
}

.center{
    color: beige;
    box-sizing: border-box;
    width: 100px;
    margin-left: 100px;
}

效果如圖：

使用定位

<div class="wrap">
    <div class="center">margin-left</div>
</div>

.wrap{
    width:300px;
    height:300px;
    background: gray;
    box-sizing: border-box;
    position: relative;
}

.center{
    color: beige;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    width: 100px;
}

效果如圖：

flex

<body>
<div class="wrap">
    <div class="center">flex</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;

}

垂直居中

1.子元素為塊級元素，寬高設定了

計算父元素的padding-top或padding-bottom

<body>
<div class="wrap">
    <div class="center">margin-top</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    padding-top: 100px;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;
}

效果如圖：

計算子元素的margin-top或margin-bottom

<body>
<div class="wrap">
    <div class="center">position</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    margin-top: 100px;
    color: #fff;
}

定位

<body>
<div class="wrap">
    <div class="center">padding-top</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    position: relative;
}

.center{
    position: absolute;
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;
    top: 50%;
    margin-top: -50px;
}

效果如圖：

flex

<body>
<div class="wrap">
    <div class="center">position</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;

}

效果如圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css圖片居中(水平居中和垂直居中) CSS3 FLEXBOX輕松實現元素的水平居中和垂直居中 CSS3 Flexbox輕松實現元素的水平居中和垂直居中 CSS 實現盒子水平居中、垂直居中和水平垂直居中的方法 [css]實現垂直居中水平居中的幾種方式 CSS布局對齊方式--水平居中、垂直居中、水平垂直居中 HTML/CSS：圖片居中(水平居中和垂直居中) CSS實現元素居中樣式（水平居中和垂直居中） CSS 水平居中與垂直居中 CSS中元素水平居中和垂直居中的方法