CSS 不定宽高的盒子水平垂直居中

在平时练习的时候经常会碰到盒子需要定位的问题,一般都是使用 margin:auto 就可以实现盒子的定位了.

有同学说在面试的时候碰人家问了这道题,说实话,突然还有点懵,我想没有宽高的盒子看都看不见,何谈定位,其实是我片面了,里面可以写一些内容把盒子撑开.具体看下面:

1.flex

可能大家第一个想到的就是使用弹性盒模型了,弹性盒模型是一个非常好的布局方案,也不会有很多的兼容的问题,我们只需要两个关键的属性就可以实现:

• justify-content
• align-items
  具体如下(省略了部分代码):

   <div class="container">
        <p>i want to eat</p>
    </div>

        .container {
            width: 200px;
            height: 200px;
            border :1px solid #5588aa;

            display: flex;
            justify-content: center;
            align-items: center;
        }

2.flex + margin

这是flex方法的一个延伸,将父元素设置为flex,子元素设置属性margin : auto,也可实现居中.

    <div class="container">
        <p>i want to eat</p>
    </div>

        .container {
            width: 200px;
            height: 200px;
            border :1px solid #5588aa;
            display: flex;
        }

3. transform +absolute

这个通常用来设置图片的垂直水平居中

<div class="wrapper">
   <img src="test.png">
</div>

    .container {
    	width: 300px;
    	height: 300px;
    	border: 1px solid #ccc;
    	position: relative;
	}

  img {
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%);
	}

4. grid

格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。

<div class="wrapper">
    <img src="test.png">
</div>

        .container {
            display: grid;
            width: 200px;
            height: 200px;
            border :1px solid #5588aa;
        }

        p {
            align-self: center;
            justify-self: center;
        }

5. table-cell

利用 table 的单元格居中效果展示。与 flex 一样，需要写在父级元素上。

<div class="wrapper">
    <img src="test.png">
</div>

        .container {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 200px;
            height: 200px;
            border :1px solid #5588aa;
        }

6. ::after

可以实现图片的居中

水平方向很好理解。垂直方向，可以理解为 ::after 把 img 往下拉到了中间。

<div class="container">
    <img src="test.png">
</div>

        .container {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            text-align: center;
        }

        .container::after {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height:100%;
            background-color: blue;
        }

        img {
            vertical-align: middle;
        }

7 ::before

另一种是配合 font-size: 0实现居中
font-size: 0; 的神秘之处在于，可以消除标签之间的间隙

<div class="container">
    <img src="test.png">
</div>

        .container {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 0;
        }

        .container::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height:100%;
            font-size: 14px;
        }

        img {
            vertical-align: middle;
            font-size : 14px;
        }