CSS中关于元素居中的方法总结（超全）
CSS中关于元素居中的方法
css中一个很重要的问题，就是关于元素的居中，包括水平居中，垂直居中，本文就是为大家总结了：css中对于行内元素与块级元素不同的居中方法.
一
行内元素
水平居中：
text-align:center;垂直居中：
1. 单行文本
height 与line-height 的高度相同时，可以实现垂直居中
2. 多行文本
方法1：
vertical-align:middle;注：vertical-align 作用单元格时，才生效，所以一般会结合dispaly:table-cell;
一起使用才有效果
示例：
p{
border: 1px solid red;
height: 100px;
display:table-cell;
vertical-align:middle;
}方法2：
<style>
p{
height: 200px;
line-height: 200px;
border: 1px solid red;
font-size: 16px;
}
p span{
display: inline-block;
vertical-align: middle;
line-height: 1;
}
</style><p>
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dignissimos earum eligendi iusto, nam qui quia quidem vel veritatis vitae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dignissimos earum eligendi iusto, nam qui quia quidem vel veritatis vitae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dignissimos earum eligendi iusto, nam qui quia quidem vel veritatis vitae.
</span>
</p>样式重点分析：
1. 父级的标签，高度和行高一致
p{
height: 200px;
line-height: 200px;
border: 1px solid red;
font-size: 16px;
}
2. 子标签, 设置为行内块级元素，垂直居中，且单独设置行高
注：line-hight:1 ; 这里的1指与父级的字体大小相同，你可以可以直接写具体的px
p span{
display: inline-block;
vertical-align: middle;
line-height: 1;
}
二
块级元素
1. 水平居中
方法1：常规方法 - 定宽元素
html部分：
<div class="container">
<div class="center"></div>
</container>
CSS部分：
.container{
background: beige;
height: 1000px;
}
/*居中*/
.center{
width:300px;
height:300px;
margin:auto;
background: aqua;
}此方法缺点：内层元素必须设定（固定）宽度
方法2：不定宽元素 - 绝对定位
思路：
1.外层绝对定位，内层相对定位，外层的外层相对定位
2.外层左浮动，内层左浮动
3.外层右移50%，内层左移50%
代码：
样式部分：
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style-type: none;
border: 1px solid red;
}
.container{
position: relative;
/* 外层的外层相对定位 */
}
nav ul:after{
content: "";
display: block;
clear: both;
}
.pages3 {
position: absolute;
/*外层绝对定位*/
float: left;
left: 50%;
}
.pages3 li{
float: left;
position: relative;
/*内层相对定位*/
right: 50%;
}
.pages3 li:not(:first-child){
margin-left:5px;
}
</style>
html部分：
<header class="container">
<nav>
<ul class="pages3">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</nav>
</header>分析：
此方法有left:50%, 在margin-left:负的宽度的一半，只是宽度不确定，
所以就采用了position:relative; , right:50%; 而right：50%，
其实就是向左移动宽度的一半，
这里的百分比是以父级的宽度计算的
2. 垂直居中
方法1：
设置父元素相对定位，子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半)，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现。
IE版本都可以兼容
代码如下：
<style>
.out{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.in{
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
html代码：
<div class="out">
<div class="in"></div>
</div>方法2：
和上一种方法原理差不多，都是利用相对定位和绝对定位，有点不同是子元素内加上了transform:translateY(-50%);和margin-top: -50px;
代码如下：
<style>
.out{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.in{
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>方法3：
设置父元素为相对定位，子元素为绝对定位，同时设置子元素的top,bottom,left,right值为0，最后设置margin:auto;这能实现块元素的垂直+水平居中，看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.out{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.in{
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>总结
还可以通过flex来实现，水平居中和垂直，因为比较简单本文就没有介绍.
参考文章：
https://www.cnblogs.com/goloving/p/7657544.html
https://blog.csdn.net/zhang_yu_ling/article/details/90272623
https://blog.csdn.net/Simon9124/article/details/78935788
—— E N D ——
腾讯云开发者
