[前端日记]0.x.3/CSS居中的几种实现方法

作者: 猪脚面线 | 来源:发表于2018-01-24 13:37 被阅读149次

[前端日记]0.x.3/CSS居中的几种实现方法
CSS垂直居中，你会多少种写法？
CSS布局(不完全)总结
css实现水平垂直居中的方法总结
垂直居中
css3 元素居中的几个方法
页面中垂直居中的几种实现方法
2019-01-26
css实现盒子内部 div水平垂直居中
CSS解决盒模型居中的问题

CSS居中的几种实现

无论是水平还是垂直居中，对于子元素是单行内联文本与多行内联文本及块状元素的触发方案是不同的。首先，如果父元素的高度没有写死！父元素的高度没有写死！父元素的高度没有写死！那就用方法1！最简单！

方法1：上下相同padding

条件：针对多行内容居中；

缺点：父容器固定高度不写死，否则无效；

css代码

    .vertical {
      padding: 20% 0;
    }

如果父容器宽度写死了，再看下面的其他的方法！

方法2：line-height同高度

条件：父元素定高，元素内容为单行文本；

设置父元素的行高等于高度，line-height = height；

缺点：仅适用于文本、图片，不适用于多行文本；

方法3：绝对定位+负margin

HTML代码

<div class="box">
    <div class="vertical">haha</div>
  </div>

CSS代码

.box {
  width: 300px;
  height: 300px;
  background: #ddd;
  position: relative;
  margin: 0 auto;
}
.vertical {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -30px;
  border: 1px solid red;
  text-align: center;
  line-height: 60px;
}

运行效果如下（本例顺带用相同方法做了水平居中）：

Screen Shot 2018-01-23 at 10.12.38 AM.png

总结

这个方法简单好理解，唯一的不足在于他必须已知被居中块级元素的宽高，否则也谈不上用绝对定位来调整了。

方法4：绝对定位+transform

transform是css3带给我们的新属性，借用它可以更简单的达到对多行文本，且无需知道居中元素的宽高达到垂直居中的目的。首先我们迅速过一下本例中需要用到的translate属性。

translate是一个位移属性，也就是2D平面的移动；
相应的属性由translate,``translateX,translateY`属性等；
其值可以是单值，也可以是双值。正数表示XY轴正向位移，负数表示反向位移。需要特别注意，transform: translate(100px);表示的是依x轴向右位移100px距离，这点和其他CSS属性不同，不要误以为是X,T轴都位移100px，因此建议无论如何都用双值，或者translateX；
其效果类似于relative，都是基于自身的尺寸和位置做位移；

HTML代码

<div class="box">
    <div class="vertical">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  </div>

CSS代码

.box {
  width: 300px;
  height: 300px;
  background: #ddd;
  position: relative;
}
.vertical {
  position: absolute;
  background: pink;
  top: 50%;
  transform: translate(0, -50%);
}

运行效果如下

Screen Shot 2018-01-23 at 10.39.09 AM.png

总结

这个方法实际和上面的类似都是通过定位，但是更方便的是调位置使用了transform属性，代码实现更为简洁，此外，另一个好处是我们不用知道居中元素的具体尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

方法5：绝对定位+margin:auto;

在写这个例子的时候，我还遇到了多行文本垂直居中的问题！当然，单行文本垂直居中我们就用line-height解决啦~

HTML代码

<div class="father">
    <div class="child">
      <div class="wrap">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
</div>

CSS代码

.father {
  width: 300px;
  height: 300px;
  background: #ddd;
  position: relative;
}
.child {
  width: 70%;
  height: 50%;
  background: lightblue;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  /*多行文本垂直居中*/
  display: table;
}
.wrap {
  display: table-cell;
  vertical-align: middle;
}

运行效果如下

Screen Shot 2018-01-23 at 11.55.47 AM.png

如上代码，即实现了盒子的垂直居中，也实现了多行文本的垂直居中，前者使用margin: auto，后者使用table-cell的方法；

方法6：多行文本用table-cell

display:table/table-cell的方法实际上等价于直接写一组<table>``<tr>``<td>，使用了表格的方式进行渲染，下面直接看代码！

HTML代码

<body>
  <!-- 直接用table标签 -->
  <!-- <table class="parent">
    <tr>
      <td class="child">
      卬埒氝婇柟灏痻溾圪朼胗忷刱祅杋稗乇岮翞楻。艴一帣晢揎腷屮僛醍仉，耟屮洨軡敨牏乜槔丬犮。庹一臿蛌惢亶丌蜺鮇仈，梣乜玿梛匒滘乇嶈丮夗。彘佴襾嬨馰向汜一尌婒哱昑屳陎乇，嗀粞兀盱郇裺迖氕丌呦榬竑冇疘。
      </td>
    </tr>
  </table> -->
  <!-- 用table-cell -->
  <div class="parent">
    <div class="child">
      卬埒氝婇柟灏痻溾圪朼胗忷刱祅杋稗乇岮翞楻。艴一帣晢揎腷屮僛醍仉，耟屮洨軡敨牏乜槔丬犮。庹一臿蛌惢亶丌蜺鮇仈，梣乜玿梛匒滘乇嶈丮夗。彘佴襾嬨馰向汜一尌婒哱昑屳陎乇，嗀粞兀盱郇裺迖氕丌呦榬竑冇疘。
    </div>
  </div>
</body>

CSS代码

/* 所以说，两种方法实现的效果是一样的，两种都理解之后，方便你的记忆！ */
/* .parent{
  border: 1px solid red;
  height: 600px;
}

.child{
  border: 1px solid green;
} */
.parent {
  border: 1px solid red;
  height: 60vh;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

这里需要说明：

vertical-align元素仅仅对表格，inline及inline元素*有效；
实现步骤：父元素设置display:table，子元素设置display: table-cell，然后为需要定位的元素再增加vertical-align即可；

不定宽高实现元素水平垂直居中的两种方法

方法7：伪元素+inline-block

适用场景：不定宽高的块在水平垂直居中

HTML代码

<body>
  <div class="parent">
    <div class="child">
     <p>
      卬埒氝婇柟灏痻溾圪朼胗忷刱祅杋稗乇岮翞楻。艴一帣晢揎腷屮僛醍仉，耟屮洨軡敨牏乜槔丬犮。庹一臿蛌惢亶丌蜺鮇仈，梣乜玿梛匒滘乇嶈丮夗。彘佴襾嬨馰向汜一尌婒哱昑屳陎乇，嗀粞兀盱郇裺迖氕丌呦榬竑冇疘。
     <p>
    </div>
  </div>
</body>

CSS代码

.parent{
  border: 1px solid red;
  height: 600px;
  text-align: center;
}

.child{
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}
/*用伪元素可以省标签*/
.parent::before, .parent::after {
  content:"";
/*   outline: 3px solid red;
   */  
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
/* .parent .before{
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent .after{
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
} */

效果如下