CSS——未知宽高元素的水平垂直居中的方法

本文介绍: css中经常会使用到对未知宽高元素实现水平居中的效果，此篇文章总结了常用的几个对未知宽高元素实现水平垂直居中的方法。

文章 目录

前言
一、方法1
二、方法2
三、方法3
四、方法4

前言

css中经常会使用到对未知宽高元素实现水平居中的效果，此篇文章总结了常用的几个对未知宽高元素实现水平垂直居中的方法。

一、方法1

此方法是使用相对定位 relative，绝对定位 ab solut来实现（这种方法兼容性好，被广泛使用）

position:absolute;left:50%;top:50%;
(此时，若父元素有’position:relative’;则该子元素是相对与该父元素的垂直居中，若父元素没有定义 ‘position:relative’;则子元素是相对于整个页面垂直居中)
transform:translate(-50%,-50%);
（让自身平移自身高度50%）

body 标签代码如下：

<div class="box1"&gt;
        <div class="box2"&gt;</div&gt;
</div&gt;

css 代码如下：

 <style&gt;
        .box1{
            width: 600px;
            height: 400px;
            background-color: aquamarine;

            position: relative;
        }
        .box2{
            border: solid 2px pink;
            width: 300px;
            height: 200px;
            background-color: aquamarine;

            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%)
        }
    </style&gt;