css中实现元素垂直居中的实用方法，兼容ie8

作者: mudssky | 来源:发表于2020-11-03 15:36 被阅读0次

css中实现元素垂直居中的实用方法，兼容ie8
css 水平垂直居中实现方式
Flexbox实现元素的水平居中和垂直居中
垂直居中
CSS - 垂直水平居中方法
垂直居中，水平居中
CSS解决盒模型居中的问题
定位和居中问题
用CSS实现元素居中的N种方法
垂直居中的方法

01.已知元素宽高，50%绝对定位+负margin

这个方法可以兼容ie5；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            position:relative;
            width:800px;
            height:800px;
            background-color:red;
        }
        .box{
            background-color: gold;
            width:200px;
            height:200px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

02.未知元素宽高 margin auto

比01法的通用性要好一些

但是这个方法只有ie8以上能够正常显示。

定位后使用下面两句。

left:0;right:0;top:0;bottom:0;

margin:auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            position:relative;
            width:800px;
            height:800px;
            background-color:red;
        }
        .box{
            background-color: gold;
            width:200px;
            height:200px;
            position:absolute;
            left:0;right:0;top:0;bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

03.flex布局

flex属性只能在ie10以上的浏览器上使用。

比较简单好用，这个布局方法可以兼顾移动端的适配。

父容器添加下面几行即可。

justify-content是容器对齐方向上的布局，默认是水平方向

align-items是定义交叉轴上的对齐方式，当容器方向为水平row时，它调节垂直方向上的布局。

display: flex; justify-content: center; align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            justify-content: center;
            align-items:center;
            width:800px;
            height:800px;
            background-color:red;
        }
        .box{
            background-color: gold;
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>