使用CSS对盒子水平垂直居中的几种方法

2021-04-07

字数统计: 1k | 阅读时长≈ 4 分钟

将盒子水平居中是一件不难办的事情，那么如何做到水平垂直同时居中呢？这时候就需要思考一下了。

就不贴效果图了，效果图都是水平垂直居中的。

方法一 flex布局

核心点在于，给父元素使用flex布局，并设置align-items和justify-content为center。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平垂直居中</title>
    <style>
      .box1 {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </style>
  </head>
	<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
	</body>
</html>

方法二 CSS3 transform

这个方法的核心是采用transform: translate进行盒子的偏移，需要对子元素设置百分比的高度。

以X轴举例，假如子元素的width是x%，那么如果要让x%居中，它两边的距离（需要偏移的量）应当是(100%-x%)/2，那么translate里面需要填入的值为偏移量与原宽之比，也就是(100%-x%)/(2*x%)。如果是Y周，则变化的x%为height。

这里我为了好算全都定成了50%，实际使用可能有除不开的，建议换成sass这样的高级装备。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平垂直居中</title>
    <style>
      .box1 {
        width: 500px;
        height: 300px;
        background-color: skyblue;
      }
      .box2 {
        width: 50%;
        height: 50%;
        background-color: green;
        transform: translate(50%, 50%);
      }
    </style>
  </head>
	<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
	</body>
</html>

方法三绝对定位+负margin偏移

需要将父元素的position设置为relative等能够脱离正常文档流显示的方式以便于子元素的盒子能套在里面，子元素的position设置为absolute做一个绝对定位，并将left和top都设置为50%，此时盒子是不完全居中的，因为有他自己的大小，会导致偏右下一些，所以此时需要使用负margin做个补偿，偏移它长宽的大小。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平垂直居中</title>
    <style>
      .box1 {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
      }
      .box2 {
        width: 200px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -100px;
      }
    </style>
  </head>
	<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
	</body>
</html>

方法四完全绝对定位+自动margin

与方法三差不太多，将四个位置的距离都置为0，并添加一行margin: auto，也可以实现水平垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平垂直居中</title>
    <style>
      .box1 {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
      }
      .box2 {
        width: 200px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
	<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
	</body>
</html>

方法五 ::after伪元素

改变子元素显示为行内元素，然后使用vertical-align:middle对齐after伪元素。

知识点补充：::after伪元素中特有的content，用于在CSS渲染中向此元素逻辑上的头部和尾部添加内容，这些改动不会在DOM里出现，也不会改变文档内容，不可复制，仅渲染。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平垂直居中</title>
    <style>
      .box1 {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
      }
      .box2 {
        width: 200px;
        height: 100px;
        background-color: green;
        display: inline-block;
        vertical-align: middle;
      }
      .box1::after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    </style>
  </head>
	<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
	</body>
</html>

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

方法一 flex布局

方法二 CSS3 transform

方法三 绝对定位+负margin偏移

方法四 完全绝对定位+自动margin

方法五 ::after伪元素

方法三绝对定位+负margin偏移

方法四完全绝对定位+自动margin