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实现垂直居中的常用方法

转载于:https://www.cnblogs.com/songsongblue/p/10935289.html