css居中完全指南(翻译)

最近参加了百度的前端技术学院,任务4是要求一个元素在父元素中水平和垂直居中,提供的一篇文章对各种情况都进行了分析，很不错，英文也不是那么难懂，毕竟代码还是主体，翻译过来分享出来，翻译内容带有自己的理解有不对的地方欢迎拍砖和交流

译文 centering in css :a complete guide 地址 https://css-tricks.com/centering-css-complete-guide/

正文

文章大体分为三部分水平居中垂直居中水平和垂直居中下面就按照这个思路进行翻译

1)水平居中

1.1 inline 或者 inline-* 级别的元素如何水平居中

在inline或者 inline-* 需要居中的元素的父元素中应用 text-align:center

text-align 属性规定元素中的文本的水平对齐方式主要使用的属性值 left right center

        div {
            width:100px;
            background:red;
            text-align: center;
        }

　　　　<div>sssss</div>

效果

1.2 块级元素的居中

当你有一个一定宽度的块级元素的时候，可以设置它的margin-left margin-right 为auto来实现居中(如果没有宽度的话它会长铺满父元素的宽度 )

        div {
            width:100px;
            background:red;
            margin:0 auto;
            text-align: center;
        }

        <div>sss</div>

效果

这种方式无论你想要居中的元素的宽度是多少都会有效（注意你不能通过float使一个元素居中）

1.3 如何使好几个block元素居中

如果你有两个或者更多的块级元素需要在一行内居中,你就需要修改它们的display属性了有两种方案 display :inline-block 或者flexbox布局

1.3.1 display:inline-block (关于inline-block的间隙问题请看大漠写的这篇文章 http://www.jb51.net/css/76707.html )

        #container div {
            width:100px;
            height:100px;
            background: red;
            display:inline-block;
            margin-right: 10px;
            
        }
        #container {    
            text-align: center;
        }

        <div id="container">
        　　<div></div><div></div><div></div>
    　　</div>

效果

1.3.2 display：flexbox 使用CSS3的弹性盒子来进行布局来实现居中

        #container div {
            width:100px;
            height:100px;
            background: red;
            display:inline-block;
            margin-right: 10px;
            
        }
        #container {    
            display:flex;
            display:-moz-flex;
            display:-webkit-flex;
            flex-direction:row;  //主轴的方向 默认是水平 row 
            justify-content:center;//定义了项目在主轴上的对齐方式  flex-start flex-end center space-between space-around (看完这篇文章你会喜欢上flexbox的)

        }


    <div id="container">
        <div></div><div></div><div></div>
    </div>

效果

当然如果你想要多行的块级元素(也就是一个块级元素排布在另一个上面的时候 margin:0 auto 仍然是可行的 )

2）垂直居中

在css中垂直居中是比水平居中更复杂的

2.1 inline或者inline-*级别的元素垂直居中

　　2.1.1 单行有的时候单行的行内元素垂直居中只是因为有一个相等的padding-top 和padding-down (例子大家自己试一下我认为这种方式不是特别可行只有当我们对父元素的高度子元素的高度很清楚的时候可以使用这种方案修改起来也存在一定问题) 还好文中给出了下面的方案也就是提供相等的padding-top 和padding-down不是我们选择的方案的时候我们可以使一个不换行文本居中通过下面的设置通过设置父元素的文本的line-height=父元素的高度

        #container {
            width:100px;
            height:100px;
            background: red;
            line-height: 100px;
　　　　　　　white-space:nowrap; //文本不换行    
        }

    <div id="container">
        center
    </div>

　　2.1.2 多行多行文本的垂直居中通过设置相同的padding-top padding-down 也是可行的当这种方式不可行的时候，我们可以将多行文本放置到td 或者有有td表现的元素中（table cell）通过设置vertical-align：middle 来达到目的例子 table-cell

        #container {
            width:100px;
            height:100px;
            background: red;
            display:table;
        }

        #container p {
            display: table-cell;
            vertical-align: middle;
        }

     <div id="container">
        <p>center</p>
    </div>

效果

如果使用table-cell你觉得不好那你仍然可以使用flexbox 这个例子同文中之前的flexbox水平居中只是垂直居中需要使用属性/*justify-content* 写错了/2016.3.18 align-items 规定元素在交叉轴的排列方向

在上面的方案中只有父元素有高度（px %等等）的时候，垂直居中才会生效

当以上的方案都不可行的时候，你可以在父容器中插入一个带有100%height的元素然后让需要垂直居中的元素跟这个元素去对齐(感觉这个有点黑科技 )

        #container {
            width:240px;
            height:100px;
            background: red;
            position: relative;
            
        }
        #container::before {
            content: " ";
              display: inline-block;
              height: 100%;
              width: 1%;
              vertical-align: middle;
        }
        #container p {
            display: inline-block;
              vertical-align: middle;
              width:190px;  //在它的例子中子元素设置了宽度 如果没有宽度的限制  子元素超出父元素的宽度 就会被挤下来 
        }


    <div id="container">
        <p>centersadsd asdasda  sasdas sadasdasd</p>
    </div>

效果如下

2.2 块级元素垂直居中

　　2.2.1 知道块级元素的高度很多情况下我们是无法预知元素的高度的比如宽度的变化的时候，随着文本的重新排布，高度会发生变化关于文本的一些设置也会影响到元素的高度等等原因，但是当你的确了解一个元素的高度的时候，可以使用下面的方式去垂直居中

        #container {
            width:300px;
            height:100px;
            background: red;
            position: relative;    
        }
        #container p {
            position: absolute;
            top:50%;
            height:40px;
            margin-top:-20px;
            background: green;
        }

     <div id="container">
        <p>centersadsd asdasda  sasdas sadasdasd</p>
    </div>

这种方案的实现思路是通过子元素的绝对定位到父元素高度50%的位置在通过margin-top 为-50%自己本身的告诉来达到处置居中的方式

效果

　　2.2.2 不知道元素的高度通过transform 移动在Y轴的距离为本身的50% 原理上跟知道高度的类似

        #container {
            width:300px;
            height:100px;
            background: red;
            position: relative;    
        }
        #container p {
            position: absolute;
            top:50%;
            transform:translateY(-50%);
            -webkit-transform:translateY(-50%);
            background: green;
        }

     <div id="container">
        <p>centersadsd asdasda  sasdas sadasdasd</p>
    </div>

效果

　　2.2.3 你仍然可以使用flexbox来实现上面的垂直居中

3）水平和垂直居中

简单的说你可以组合上面的水平和垂直的居中方案来实现你想要的居中但是可以分为如下的3中类型

　　3.1.1 有固定的高度和宽度的元素水平和垂直居中同上面的固定高度的垂直居中水平可以定位到50%父元素宽度 margin-left 50%自己的宽度来水平居中

　　3.1.2 没有固定高度和宽度的元素的水平居中同上面的没有高度的垂直居中水平定位到50%父元素的宽度 transform：translateX(-50%) 来达到水平居中

　　3.1.3 别忘了你还有flexbox

4）结论

你使用CSS是可以达到居中的

感想：关于居中这个问题，自己一直没有好好的考虑过或者说深入的研究过，只是碰比如在之前的项目中将vertical-align属性使用在块级元素上等这次算是小小的学习一下 flexbox提供了功能强大的居中方案可以尝试