实现元素水平垂直居中的4种方法

最新推荐文章于 2021-02-23 06:35:04 发布

原创

最新推荐文章于 2021-02-23 06:35:04 发布 · 4.3k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#定位 #css #html #flex #css3

本文介绍了4种CSS方法实现元素的垂直水平居中：1) 使用弹性盒模型flex；2) 通过定位position及外边距；3) 结合position和transform的translate属性；4) 利用position与margin：auto。每种方法都有其适用场景和特点。

引

元素的垂直水平居中在网页开发中极为常见，其实现方法也多种多样，接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图：在这里插入图片描述

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

一、使用弹性盒模型flex实现

设置父元素的布局方式为flex， display: flex;
设置父元素在水平方向上的对齐方式为居中对齐，justify-content: center;
设置父元素在垂直方向上的对齐方式为居中对齐， align-items: center;

 <style>
 //标签默认会有内外边距，为了防止影响效果，一般先清除所有元素的默认边距
        * {
   
   
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .father {
   
   
            display: flex;
            width: 400px;
            height: 400px;
            justify-content: center;
            align-items: center;
            background-color: skyblue;
            margin: 200px auto;
        }