CSS如何水平垂直居中？

1、CSS如何实现水平居中？　　　　

margin: 0 auto

2、CSS如何实现水平垂直居中？

首先设置一个div元素，设置背景颜色以便看出变化。代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS水平垂直居中</title>

    <style>

        .content {

            width: 300px;

            height: 300px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

页面效果如下：

通过设置margin: 0 auto实现水平居中。代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS水平垂直居中</title>

    <style>

        .content {

            width: 300px;

            height: 300px;

            background: blue;

            margin: 0 auto

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

页面效果如下：

如何实现垂直居中呢？

方法一：通过display:relative设置top、bottom、right、left等属性实现位置偏移

在这之前，我们先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是为0的），并且清除默认样式，即把margin和padding设置为0（如果不清除默认样式的话，浏览器就会出现滚动条）

通过设置position可以实现元素向不同方向的移动。在默认情况下（position：static; //静止的、不可以移动的）我们不可以直接设置top、bottom、right、left等属性使它在文档中发生位置偏移，需要设置position的值为relative,absolute,fixed等（relative是不会使元素脱离文档流的，元素在文档流里是从上往下、从左到右紧密的布局的。）实现位置偏移。

代码实现如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS水平垂直居中</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: blue;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

页面效果如下：

这时，并没有居中，图片显示效果偏下，因为这里我们设置top：50%，所以我们设置的块状元素在页面中心位置开始向下分布，需要设置margin-top: -150px;150px是块状元素一半的高度。代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS水平垂直居中</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: blue;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

            margin-top: -150px;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

页面效果如下：

方法二：通过CSS3的transform属性

CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS水平垂直居中</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: blue;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

            transform: translateY(-50%);

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

页面效果如下：

方法三：使用CSS3的弹性布局（flex）

使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS水平垂直居中</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

         body {

            display: flex;

            align-items: center; /*定义body的元素垂直居中*/

            justify-content: center; /*定义body的里的元素水平居中*/

        }

        .content {

            width: 300px;

            height: 300px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

页面效果如下：

原文地址：CSS实现垂直居中的常用方法