使用flex布局解決百分比高度元素垂直居中

本文轉載自查看原文 2019-01-25 14:46 1041 css

方法一： align-self（解決父元素下面單個子元素布局方式）

父級加上

　div{display：flex}

子元素

span {
  flex-grow: 1;
  align-self: center;
}

這種方法僅僅適應於外層元素中只包含一個子元素，或者子元素是獨占一行的，因為這個時候對子元素進行設置寬度是無效的,設置了 flex-grow: 1；會是如下的效果

如果想設置一個div水平垂直都居中那么只需要將flex-grow去掉，加上寬度並設置margin:auto即可，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazyload</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%
        }
        #pictures{
            display:flex;
            width:100%;
            height:100%
        }
        #pictures>span{
            width:200px;
            height:200px;
            border:1px solid red;
            flex-grow:1;
            align-self:center
        }
    </style>
    
</head>
<body>
    <div id="pictures">
        <span></span>
    </div>
</body>
</html>

效果

注意：align-self 只能是對子元素起作用，父元素設置了display:flex后，對指定的子元素設置的時候可以用到 align-self

例如有多個子元素，我就想讓其中的一個進行居上，這個時候就可以對指定的元素設置 align-self設置flex-start

align-self屬性值：

align-self: auto | flex-start | flex-end | center | baseline | stretch;

方法二：align-items

父級元素加上

display: flex;
align-items: center; /*定義body的元素垂直居中*/
justify-content: center; /*定義body的里的元素水平居中*/

直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            align-items: center; /*定義body的元素垂直居中*/
            justify-content: center; /*定義body的里的元素水平居中*/
        }
        .content1,.content2 {
            width: 300px;
            height: 300px;   
        }
        .content1{
            background: orange;  
        }
        .content2{
            background:pink;
        }
    </style>
</head>
<body>
    <div class="content1"></div>
    <div class="content2"></div>
</body>
</html>

效果：

免責聲明！

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

猜您在找 【Flex】子元素設置百分比高度生效的解決方法高度百分比時的文字垂直居中高度是百分比，怎么設置里面的字垂直居中？ css的div垂直居中的方法，百分比div垂直居中 div設置百分比高度寬度 HTML5 移動端如何使用css讓百分比布局的彈窗水平和垂直方向上居中使用flex布局讓div垂直居中使用flex布局，垂直居中布局：flex彈性布局_百分比 flex布局實現水平垂直居中