CSS-设置水平居中总结

平居中设置

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下

行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

定宽块状元素

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

如果是定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

不定宽块状元素

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

加入 table 标签
设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

第一种做法：

为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

html代码：

<div>
 <table>
 <tbody>
 <tr><td>
 <ul>
 <li>我是第一行文本</li>
 <li>我是第二行文本</li>
 <li>我是第三行文本</li>
 </ul>
 </td></tr>
 </tbody>
 </table>
</div>

css代码：

<style>
table{
 border:1px solid;
 margin:0 auto;
}
</style>

第二种做法：

改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

<body>
<div class="container">
 <ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 </ul>
</div>
</body>

css代码：

<style>
.container{
 text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
 list-style:none;
 margin:0;
 padding:0;
 display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
 margin-right:8px;
 display:inline;
}
</style>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

方法三：

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

代码如下：

<body>
<div class="container">
 <ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 </ul>
</div>
</body>

css代码：

<style>
.container{
 float:left;
 position:relative;
 left:50%
}
.container ul{
 list-style:none;
 margin:0;
 padding:0;
 
 position:relative;
 left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，集齐各种常用的居中方法，以备平时工作使用查阅，也欢迎大家更新或者提供建议

水平居中

1.行内元素水平居中

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

.parent{
 text-align:center;//在父容器设置
}

此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。如下

常常有一些初学者在使用text-align:center时会碰到不生效的问题，如下面的一个例子

p为块状元素，所以只需要在p的css代码里设置display:inline或display:inline-block，将块状元素转为内联元素即可。对于块状元素也可以使用margin:0 auto;来控制居中。

2.块级元素的水平居中（5种方法）

这种情形可以有多种实现方式，下面我们详细介绍:

1）将该块级元素左右外边距margin-left和margin-right设置为auto

.child{
 width: 100px;//确保该块级元素定宽
 margin:0 auto;
}

2）使用table+margin

先将子元素设置为块级表格来显示（类似），再将其设置水平居中。display:table在表现上类似table元素，实现table一样的居中效果，但是宽度为内容宽。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .child {
 display: table;
 margin: 0 auto;
 }
</style>

3）使用absolute+transform

先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .child {
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 }
 .parent {
 position:relative;
 }
</style>

注：不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。

4）使用flex+justify-content

通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .parent {
 display: flex;
 justify-content:center;
 }
</style>

也会遇到和transform一样的问题，需要注意浏览器的兼容性

5）使用flex+margin

通过flex将父容器设置为为Flex布局，再设置子元素居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .parent {
 display: flex;
 }
 .child {
 margin:0 auto;
 }
</style>

垂直居中

单行内联元素垂直居中

<div id="box">
 <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
 height: 120px;
 background: blue;
 line-height: 120px;
 border: 2px dashed #f69c55;
 color: white;
 }
</style>

2.多行内联元素垂直居中（2种方法）

1）利用flex布局（flex）

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。

<div class="parent">
 <p>Dance like nobody is watching, code like everybody is. 
 Dance like nobody is watching, code like everybody is. 
 Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
 .parent { 
 height: 140px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 border: 2px dashed #f69c55;
 }
</style>

2)利用表布局（table）

利用表布局的vertical-align: middle可以实现子元素的垂直居中

<div class="parent">
 <p class="child">The more technology you learn, the more you realize how little you know.
 The more technology you learn, the more you realize how little you know.
 The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
 .parent {
 display: table;
 height: 140px;
 border: 2px dashed #f69c55;
 }
 .child {
 display: table-cell;
 vertical-align: middle;
 }
</style>

3 块级元素垂直居中（四种方法）

1）使用absolute+负margin(已知高度宽度)

通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。

必须要指定父元素的高度，否则出现高度塌陷的问题

2）使用absolute+transform

当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

<div class="parent">
 <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

3）使用flex+align-items

通过设置flex布局中的属性align-items，使子元素垂直居中。

<div class="parent">
 <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
 display:flex;
 align-items:center;
}

4）使用table-cell+vertical-align

通过将父元素转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .parent {
 display: table-cell;
 vertical-align: middle;
 }
</style>

水平垂直居中（5种方法）

这种情形也是有多种实现方式。

方法1：绝对定位与负边距实现（已知高度宽度）

注：这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。

方法2：绝对定位与margin:auto（已知高度宽度）

这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。

 #container {
 position: relative;
 height:100px;//必须有个高度
 }
 #center {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;//注意此处的写法
 }

方法3：绝对定位+CSS3(未知元素的高宽)

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。 CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。

 #container {
 position: relative;
 }
 #center {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }

方法4：flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。

 #container {//直接在父容器设置即可
 height: 100vh;//必须有高度
 display: flex;
 justify-content: center;
 align-items: center;
 }

方法5：flex/grid与margin:auto

容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

 #container {
 height: 100vh;//必须有高度
 display: grid;
 }
 #center {
 margin: auto;
 }

链接文章

https://segmentfault.com/a/1190000013966650

https://juejin.im/post/5bc3eb8bf265da0a8a6ad1ce

https://segmentfault.com/a/1190000015095402

自己是一名从事了多年开发的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

在线咨询

上一篇：Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点
下一篇：Html+CSS小案例项目：CSS开发小米商城电商产品展示效果

您的项目需求

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

整合营销服务商

CSS-设置水平居中总结

行内元素

定宽块状元素

不定宽块状元素

水平居中

垂直居中

水平垂直居中（5种方法）

您的项目需求