网页元素CSS居中实现完整攻略_css块在网页居中后块只有一般-CSDN博客

以前一直碰到css居中问题，不知道如何解决，偶然看到一个教程，总结了一下。所以和大家一起分享！

1、水平居中：行内元素解决方案

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

text-align: center

适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

例子：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

nav, div{

text-align: center;

}

</style>

</head>

<body>

<nav>

</nav>

</div>

</body>

</html>

2、水平居中：块状元素解决方案

对于块状元素（display:block）来说，我们需要将它的左右外边距（即，margin-left，margin-right）设置为auto，即可实现块状元素的居中，如下：

.center{

/* 这里可以设置顶端外边距 */

margin: 10px auto;

}

例子：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

div,p {

width: 200px; /* 这里需要设置元素宽度 */

height: 150px;

background: #222;

color: #FFF;

}

.center{

/* 这里可以设置顶端外边距 */

margin: 10px auto;

}

</style>

</head>

<body>

水平居中的块状元素

</div>

<p class="center">水平居中的块状元素</p>

</body>

</html>

3、水平居中：多个块状元素解决方案

如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。

4、水平居中：多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

例子：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

body{

display: flex;

justify-content: center;

}

/* 页面美化元素 */

div{

width: 100px;

background: #222;

height: 50px;

color: #FFF;

padding: 10px;

margin: 10px;

}

</style>

</head>

<body>

<div>水平居中的块状元素</div>

</body>

</html>

5、垂直居中：单行的行内元素解决方案

当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。

#container{

background: #222;

height: 200px;

}

/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */

height: 200px;

line-height:200px;

color: #FFF;

}

例子：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

#container{

background: #222;

height: 200px;

}

/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */

height: 200px;

line-height:200px;

color: #FFF;

}

</style>

</head>

<body>

<a href="#">hello, gbtags.com</a>

</div>

</body>

</html>

6、垂直居中：多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.container{

background: #222;

width: 300px;

height: 300px;

/* 以下属性垂直居中 */

display: table-cell;

vertical-align:middle;

}

7、垂直居中：已知高度的块状元素解决方案

定义居中元素的相关属性，如下：

/* 以下为居中代码 */

.item{

top: 50%;

margin-top: -50px;

position: absolute;

padding:0;

}

例子：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

.container{

background: #222;

width: 300px;

height: 300px;

/* 以下属性垂直居中 */

display: table-cell;

vertical-align:middle;

}

</style>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!

</a>

</div>

</body>

</html>

8、垂直居中：未知高度的块状元素解决方案

对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中：

.item{

top: 50%;

position: absolute;

transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */

9、水平垂直居中：已知高度和宽度的元素解决方案

类似我们前面学到的方法，我们可以设置元素定位为absolute，并且设置top, left绝对值为50%，margin-top和margin-left为元素高度一半的负值即可，如下：

.item{

position: absolute;

top: 50%;

left: 50%;

margin-top: -75px;

margin-left: -75px;

}

例子：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

div{

width: 150px;

height: 150px;

background: #222;

color: #FFF;

}

.item{

position: absolute;

top: 50%;

left: 50%;

margin-top: -75px;

margin-left: -75px;

}

</style>

</head>

<body>

</div>

</body>

</html>

10、水平垂直居中：未知高度和宽度元素解决方案

使用类似的transform属性来定义，即可实现，如下：

.item{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

例子：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

div{

background: #222;

color: #FFF;

}

.item{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%)

}

</style>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.

</div>

</body>

</html>

11、水平垂直居中：使用flex布局实现