谈css居中问题

css居中的问题在实际中经常用到，但是居中方法之多，在不同的场景中用什么方法，今天稍微的总结一下所有类型的居中问题。

1、水平居中（文字、链接）

此类只要在父级元素上加上

text-align: center;

2、块状元素居中

在有宽度的前提下，设置左右的margin为auto即可；

container{
    width：100px;
    margin-left: auto;
    margin-right: auto;
}

3、多个块元素居中

大致有两种可实现思路

1. 使用flex弹性盒子布局（ safari不支持）

.container {
    width: 500px;
    height: 300px;
    display: flex;
    justify-content: center;
}
.content {
    width: 100px;
    background: red;
    margin: 10px;
}
<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

1. 第二种方式将多个块元素变为inline-block;是的转化为单个的行内块元素居中

.container {
    width: 500px;
    height: 300px;
    text-align: center;
}
.content {
    width: 100px;
    background: red;
    display: inline-block;
}
<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

二、垂直居中的问题

单行文本显示：height=line-height；即可

多行文本显示

多行文本在表格中是默认垂直居中的，这样利用这一点可实现。父元素设置display: table;子元素设置table-cell;

.father{
    display: table;
}
.children{
    display: table-cell;
    vertical-align: middle;
}

由于table不适合现在界面的布局，这里可以使用flex布局，不过父容器的高度不能设置，让内部元素的height决定整个容器的高度

.father{
    display: table;
}
.children{
    height: 200px;
    display: flex;
    justify-content: center;
    flex-direction: column;

}

不过这个方法真的很是少用。

还有一种鸡贼的方法，使用伪类的方法达到垂直居中，思路就是使用伪类创造一个空的元素，在用vertical-align:middle和inline-block并排的话，高度小的会相对高的垂直居中排放；

.container{
    width: 300px;
    height: 300px;
    text-align: center;
}
.container:before{
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.content{
   /* inline-block有一定的间距，所以留一定的距离 */
    width:270px;
    display: inline-block;
    vertical-align: middle;
}

<div class="container">
    <div class="content">这里测试的文本文本</div>
</div>

三：块状元素

知道元素宽高

.father{
    position: relative;
}
.children{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: 50px;
}

不知元素宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);

}

本文整理的有些粗糙，里面涉及的有些东西没有细说明，有些方法也没有整理出来，有些东西追究其根本的话，牵扯到css的渲染机制，有时间会整理一篇css的渲染机制，在这里不做介绍，（其中里面的before,after还有很多鸡贼的用法，有时间也会整理一些）；今天先到这里