在平时写网页样式的时候，元素居中应该是最常见不过的了，在这里我们把常见居中的情况简单总结一下。本文讨论以下几种情况：内联元素、块级元素、浮动元素、绝对定位元素。居中的情况分两种情况：水平居中和垂直居中。刚接触到居中，我想到的是两个方向，一是使元素内部的所有元素相对于此元素居中，另一个是元素在其他元素中居中。以下的居中我们讨论的都是元素在其他元素中居中。
（一）内联元素
水平居中：只需在其父元素的样式中加上text-align: center;即可。
垂直居中：
1. line-height
2. padding
3. line-height 和 padding结合
三种方法都是在父元素上添加
<div class="aha">
<span>从明天起</span>
</div>
<style>
.aha{
border: 1px solid red;
text-align: center;
line-height: 100px;
/* padding: 30px 0; */
}
</style>
效果图：
（二）块级元素
A. 水平居中：修改margin，分两种情况讨论，一种是宽度固定，一种是宽度不固定。
a）宽度固定时，margin-left: auto; margin-right: auto;
b）宽度不固定时，margin-left: 20px; margin-right: 20px;
<body>
<div class="parent">
<div class="child">haha</div>
</div>
</body>
<style>
.parent{
border: 1px solid red;
}
.child{
width: 100px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
}
</style>
效果图：
<body>
<div class="parent">
<div class="child">haha</div>
</div>
</body>
<style>
.parent{
border: 1px solid red;
}
.child{
border: 1px solid green;
margin-left: 100px;
margin-right: 100px;
}
</style>
效果图：
B. 垂直居中：设置父元素的padding: 100px 0; 不管高度是否确定。
<body>
<div class="parent">
<div class="child">haha</div>
</div>
</body>
<style>
.parent{
border: 1px solid red;
padding: 150px 0;
}
.child{
/* height: 100px; */
border: 1px solid green;
}
</style>
效果图：
垂直居中也分两种情况一是当父元素高度固定时，有两种方法，第一种可以考虑position: absolute;缺点是子元素的宽高得固定，且父元素的高度不能自适应，具体代码如下：
<body>
<div class="parent">
<div class="child">haha</div>
</div>
</body>
<style>
.parent{
border: 1px solid red;
box-sizing: border-box;
position: relative;
height: 200px; // 如果设置全屏height: 100vh;
}
.child{
border: 1px solid green;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height:100px;
}
</style>
效果图：
第二种是IE的话使用table标签，或者给div添加table的相关属性（具体方法见文末），Chrome和移动端可以使用flex布局。
<body>
<div class="parent">
<div class="child">haha</div>
</div>
</body>
<style>
.parent{
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.child{
border: 1px solid green;
}
</style>
效果图：
垂直居中还有一种情况是父元素高度不固定时，父元素用flex布局；
display: flex; justify-content: center; align-items: center;
（三）浮动元素，看到这个分类是不是想吐槽，没错，我也想，本来都让人家靠左站或者靠右站了，还要让它居中，真是闲的。
如果碰到这种情况我们可以试着把浮动元素包裹在其他类型的元素里面，例如inline-block元素里，再把这个inline-block元素居中。inline-block元素有一个坑，就是包起来之后下面会有一个缝隙，加上这样一句话，vertical-align: top; 方方老师说别问他为什么，那你也别问我为什么，我也不知道。。。inline-block元素居中，在其父元素上添加text-align: center;
（四）绝对定位元素：分两种情况，宽高固定和宽高不固定。
首先宽高固定：
<body>
<div class="parent">
<div class="child">haha</div>
</div>
</body>
<style>
.parent{
border: 1px solid red;
position: relative;
height: 200px;
}
.child{
border: 1px solid green;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
效果图：
宽高固定还有一种方法，参考上面的块级元素垂直居中的父元素高度固定的第一种方法。
然后是宽高不固定，把上一种情况的margin-left和margin-top换成transform: translate(-50%, -50%)。
以上（三）、（四）种是脱离文档流的情况，所有脱离文档流的元素都变成了块级元素。
table标签是默认的绝对居中，IE也支持兼容性更好，上面提到的用div添加table的相关属性模仿table标签，class值为table的div设置属性display: table; class值为tr的div设置属性display: table-row; class值为td的div设置属性display: table-cell; vertical-align: middle;
原文地址：https://www.cnblogs.com/CCCLARITY/p/8271267.html