使用CSS完成元素居中的七种方法

● ●

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。

在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:

<div class="center"> <img src="jimmy-choo-shoe.jpg" alt></div>

鞋子图片会改变，但是他们都会保持500pxX500px的大小。 HSL colors 用于使背景颜色保持一致。

使用text-align水平居中

有时显而易见的方案是最佳的选择：

div.center { text-align: center; background: hsl(0, 100%, 97%);
}
div.center img { width: 33%; height: auto;}

这种方案没有使图片垂直居中：你需要给<div>添加padding或者给内容添加margin-top和margin-bottom使容器与内容之间有一定的距离。

使用 margin: auto 居中

这种方式实现水平居中和上面使用text-align的方法有相同局限性。

div.center { background: hsl(60, 100%, 97%);}

div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}

注意：必须使用display: block使margin: 0 auto对img元素生效。

使用table-cell居中

使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中，但是这种方法需要添加额外的元素作为外部容器。

<div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div></div>

CSS:

.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}
.center-core img { width: 33%; height: auto;}

注意：为了使div不折叠必须加上width: 100%，外部容器元素也需要加上一定高度使得内容垂直居中。给html和body设置高度后，也可以使元素在body垂直居中。此方法在IE8+浏览器上生效。

使用absolute定位居中

这种方案有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height：

.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

Stephen在他的博客中演示了这种方案的几种变化。

使用translate居中

Chris Coiyer 提出了一个使用 CSS transforms 的新方案。同样支持水平居中和垂直居中:

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}

但是有以下几种缺点:

CSS transform 在部分就浏览器上需要使用前缀。
不支持 IE9 以下的浏览器。
外部容器需要设置height（或者用其他方式设置），因为不能获取绝对定位的内容的高度。
如果内容包含文字，现在的浏览器合成技术会使文字模糊不清。

使用Flexbox居中

当新旧语法差异和浏览器前缀消失时，这种方法会成为主流的居中方案。

.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}

在很多方面 flexbox 是一种简单的方案，但是它有新旧两种语法以及早期版本的IE缺乏支持（尽管可以使用 display: table-cell作为降级方案）。

现在规范已经最终确定，现代浏览器也大都支持,我写了一篇详细的教程教程。

使用calc居中

在某些情况下比flexbox更全面：

.center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

很简单，calc允许你基于当前的页面布局计算尺寸。在上面的简单计算中， 50% 是容器元素的中心点，但是如果只设置50%会使图片的左上角对齐div的中心位置。我们需要把图片向左和向上各移动图片宽高的一半。计算公式为：

top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));

在现在的浏览其中你会发现，这种方法更适用于当内容的宽高为固定尺寸：

.center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }

我在这篇文章中详细讲解了calc。

这种方案和flex一样有许多相同的缺点：虽然在现代浏览器中有良好的支持，但是在较早的版本中仍然需要浏览器前缀，并且不支持IE8。

.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

当然还有其他更多的方案。理解这六种方案之后，web开发人员在面对元素居中的时候会有更多的选择。

关注“网页设计自学平台”订阅号回复以下｜关键字｜

｜dw教程｜js教程｜淘宝案例｜软件下载｜搜狐案例｜网站模板

｜ps教程｜ai教程｜ui教程｜腾讯案例｜ ae教程｜字体下载｜

｜上课素材｜前端特效｜华润万家案例｜最新dw案例｜

戳“阅读原文”入群获取最新高清前端视频！

自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取

Html5-CSS之五大居中方式

你是不是也对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？恭喜你，搜到这篇博客！这是鄙人在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！

下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素

设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色

css居中方式1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素，并使得样式为inline-block;height:100%;就是和父元素一样高，vertical-align:middle;垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div一样高，所以相当于p元素在div里垂直居中。

css居中方式2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了定位居中

子元素p设置position：absolute脱离文档流,默认以html作为父元素，所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使用这种方式来移动），最后margin:auto;就会水平和垂直都居中。

css居中方式3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了弹性盒居中

父元素div设置成弹性盒样式，justify-content:center;主轴居中

align-items:center;垂直居中（而且这两个只能设置在父元素上，弹性盒知识）

css居中方式4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用定位线左上角居中，然后左移子元素宽度的一半，再上移子元素高度的一半。

css居中方式5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
	transform:translate(-50%,-50%);}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用动画移动属性transform

结语

相信看了上面的有关Html5、css的元素五大居中方式，你们就可以解决自己的小问题了，但是也要养成一个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Come on！

原文链接：https://blog.csdn.net/qq_38110274/article/details/102756968

SS 是前端里面的基础之一，也是非常重要的一部分，它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中，总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。

一、使用 margin:auto

当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。此时就需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0。

HTML 代码

<div class="box">
  <div class="center1"></div>
</div>

CSS 代码

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示：

二、使用 position:absolute

当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。但是，使用的同时还需要结合其他属性才完整实现。因为，单是设置 absolute，上左距离均为一半，就会出现下面这种情况。很显然可以看到，元素并不是完全居中，仅只有左上角的位置在中心点

概念图：

因此想要实现元素完全水平垂直居中，在设置了 absolute 定位后，可以设置 margin 值为负，或者使用 calc 来计算，上左距离在 50% 的基础上还要减去元素本身一半的宽高。

margin 值为负或者 calc 计算均是在已知元素宽高的情况下，假设不知道元素的宽高，那么怎么实现水平垂直居中呢？这里就可以使用 transform 属性，通过坐标位移来实现居中。

CSS 代码

/* 结合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 结合 calc 计算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 结合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示

PART

三、使用弹性布局

可以通过弹性布局来设置水平垂直居中，这里需要设置父级元素 display:flex; 还需要设置两个属性，水平布局 justify-content 以及垂直布局 align-items。

HTML代码

<div class="box2">
  <div class="center4"></div>
</div>

CSS代码：

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示：

四、文本水平对齐和行高

前面介绍的是元素如何实现水平垂直居中，下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的，使用文本水平对齐 text-align 和行高 line-height 来实现的。

HTML 代码

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代码

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示

PART

五、使用网格布局

第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现，一种对元素本身属性进行设置，另一种在元素的父级元素中设置。两者看上去内容似乎差不多，不同的是在元素中设置的是 align-self 还要多了一个 margin，父级元素中是 align-items。

相关代码：

/* grid 元素中设置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父级元素中设置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示：

六、总结

以上就是关于 CSS 如何将元素或者文字进行水平垂直居中的几种常用方法，大家还其他关于 CSS 实现水平垂直居中的方法吗？请在评论区留下你的想法。

关注w3cschool编程狮订阅更多IT资讯、技术干货~

在线咨询

上一篇：网页开发中，有哪些方法可以加载CSS？
下一篇：HTML5的表格使用方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

使用CSS完成元素居中的七种方法

使用text-align水平居中

使用 margin: auto 居中

使用table-cell居中

使用absolute定位居中

使用translate居中

使用Flexbox居中

使用calc居中

一、使用 margin:auto

二、使用 position:absolute

三、使用弹性布局

四、文本水平对齐和行高

五、使用网格布局

六、总结

您的项目需求