元素垂直居中的几种方法

最新推荐文章于 2022-12-12 18:13:57 发布

樱桃小丸子~

最新推荐文章于 2022-12-12 18:13:57 发布

阅读量372

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/horizon_26/article/details/78141989

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先为子元素设定定位上下文；
父元素设为相对定位 position: relative

1、无需知道宽高

 让子元素绝对居中于父容器 。使用 CSS transform 属性实现居中效果

<style type="text/css">
    .parent{
        position: relative;
    }
    .child-with-unknown-dimensions{
        position: absolute;
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        color: #0099FF;
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child-with-unknown-dimensions">不知道宽高。使用 CSS transform 属性实现居中效果</div>
    </div>
</body>

2、知道宽，不知道高

只知道宽度，使用负向 margin 处理水平位置，使用 CSS transform 处理垂直位置

<style type="text/css">
    .parent{
        position: relative;
    }
    .child-with-known-width { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        width: 400px; 
        margin-left: -200px;  /* margin-left的值为：宽度的一半*/
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        color: #c429ee; 
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child-with-known-width">
            只知道宽度，使用负向 margin 处理水平位置，使用 CSS transform 处理垂直位置
        </div>
    </div>
</body>

3、知道高，不知道宽

只知道高度，所以就使用负向 margin 处理垂直位置，使用 CSS transform 处理水平位置

<style type="text/css">
    .parent{
        position: relative;
    }
    .child-with-known-height { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        height: 400px; 
        margin-top: -200px;
        transform: translateX(-50%);
        color: #cb2020;
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child-with-known-height">
            只知道高度，所以就使用负向 margin 处理垂直位置，使用 CSS transform 处理水平位置
        </div>
    </div>
</body>

4、知道宽高

知道高度和宽度，所以就使用负向 margin 处理水平和垂直位置

<style type="text/css">
    .parent{
        position: relative;
    }
    .child-with-known-dimensions { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        width: 400px;
        height: 400px; 
        margin-top: -200px;
        color: #cb2020;
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="child-with-known-dimensions">
            知道高度和宽度，所以就使用负向 margin 处理水平和垂直位置 
        </div>
    </div>
</body>

5、使用 Flexbox 实现子元素的居中效果

 兼容性IE9+

<style type="text/css">
    .parent{
        display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */ 
        display: -moz-box;      /* OLD - Firefox 19- (buggy but mostly works) */ 
        display: -ms-flexbox;   /* TWEENER - IE 10 */ 
        display: -webkit-flex;  /* NEW - Chrome */
        display: flex;          /* NEW, Spec - Opera 12.1, Firefox 20+ */
        justify-content: center;  /* 定义了项目在主轴上的对齐方式。--水平居中*/
        align-items: center;     /* 定义项目在交叉轴上如何对齐。--垂直居中*/
    }
</style>
</head>
<body>
    <div class="parent">
        <div class="center-children">
            不管是否知道宽高，都可以使用 Flexbox 实现子元素的居中效果，此方法存在兼容问题。
        </div>
    </div>
</body>