CSS如何让元素水平，垂直，水平且垂直居中（最全集）

最新推荐文章于 2024-03-26 17:58:00 发布

_Boboy

最新推荐文章于 2024-03-26 17:58:00 发布

阅读量7.2k

点赞数 10

分类专栏： CSS 文章标签： CSS 元素居中前端 html

本文链接：https://blog.csdn.net/weixin_43720095/article/details/89061246

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

在这里插入图片描述

元素水平居中的方式

1.行内元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。


		.box{
			width: 100%;
			height: 500px;
			background-color: #ccc;
			/*css代码核心*/
			text-align: center;
		}


	<div class="box">水平居中</div>

2.块级元素的水平居中
2.1通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。（行内块元素不适用）

		.box{
			width: 500px;
			height: 500px;
			background-color: #ccc;
			/*css代码核心*/
			margin:0 auto;
		}


	<div class="box">水平居中</div>

如果是行内块元素居中，可以给父级元素设置text-align：center（如上1）


		.box{
			display: inline-block;
			width: 500px;
			height: 500px;
			background-color: #ccc;
		}
		.box1{
			width: 1000px;
			height: 1000px;
			background-color: #000;
			/*css代码核心*/
			
			text-align: center;
		}

	<div class="box1"><div class="box">水平居中</div></div>

2.2使用table+margin，先将子元素设置为块级表格来显示（类似），再将其设置水平居中，display:table在表现上类似block元素，但是宽度为内容宽。

		.box{
			width: 500px;
			height: 500px;
			background-color: #ccc;
			/*css代码核心*/
			display: table;
			margin:0 auto;
		}
		.box1{
			width: 1000px;
			height: 1000px;
			background-color: #000;
		}


	<div class="box1"><div class="box">水平居中</div></div>

2.3使用absolute+transform或者margin 先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。（不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。）
2.3.1在不知道自身大小的情况

<div class="box">
  <div class="box1">Demo</div>
</div>
<style>
  .box1 {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .box {
    position:relative;
  }
</style>

2.3.2在知道自身大小情况下

		.box{
			width: 500px;
			height: 500px;
			background-color: #ccc;
			/*css代码核心*/
		    position:absolute;
		    left:50%;/*这里也可以用具体数值*/
		    margin-left: -250px;
		}
		.box1{
			width: 1000px;
			height: 1000px;
			background-color: #000;
			/*css代码核心*/
			position:relative;
		}


	<div class="box1"><div class="box">水平居中</div></div>

2.4使用flex+justify-content 通过给父级元素设置CSS3中的布局利器flex中的justify-content属性来达到水平居中。

<div class="box1">
  <div class="box">Demo</div>
</div>
<style>
  .box1 {
    display: flex;
    justify-content:center;
  }
</style>

2.5使用flex+margin 通过flex将父容器设置为为Flex布局，再设置子元素居中。

<div class="box1">
  <div class="box">Demo</div>
</div>

  .box1 {
    display: flex;
  }
  .box {
    margin:0 auto;
  }

3.多块级元素水平居中
3.1利用flex布局实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式，本例中设置子元素水平居中显示

 #container {
    display: flex;
    justify-content: center;
}

3.2利用inline-block 将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

.container {
text-align: center;
}
.inline-block {
display: inline-block;
}

4.浮动元素水平居中
4.1对于定宽的浮动元素，通过子元素设置relative + 负margin或者relative + transform

		.box{
			width: 500px;
			height: 500px;
			background-color: #ccc;
			float: left;
			/*css代码核心*/
			   position:relative;
			   left:50%;
			   /*margin-left:-250px;*/
			   transform: translateX(-50%);
			
		}
		.box1{
			width: 1000px;
			height: 1000px;
			background-color: #000;
		}

	<div class="box1"><div class="box">水平居中</div></div>

4.2不定宽的浮动元素通过父子容器都相对定位（注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素）

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>
.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

4.3通用办法flex布局(不管是定宽还是不定宽) 利用弹性布局(flex)的justify-content属性，实现水平居中。

.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
    width: 200px;//有无宽度不影响居中
}
<div class="parent">
  <span class="chlid">我是要居中的浮动元素</span>
</div>

5.绝对定位元素水平居中通过子元素绝对定位，外加margin: 0 auto来实现而且left与right均为0。

<div class="parent">
    <div class="child">让绝对定位的元素水平居中对齐。</div>
</div>
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*绝对定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0;/*此处不能省略，且为0*/
    }

元素垂直居中的方式

1.单行内联元素垂直居中
在父级元素height有确切值下设置行高等于高

<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2.多行内联元素垂直居中
2.1利用flex布局（flex）其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。

<div class="parent">
    <p>利用flex布局（flex）其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>

2.2利用表布局（table）利用表布局的vertical-align: middle可以实现子元素的垂直居中

<div class="parent">
    <p class="child">利用表布局（table）利用表布局的vertical-align: middle可以实现子元素的垂直居中</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3.块级元素垂直居中
3.1使用absolute+负margin(已知高度宽度)或者使用absolute+transform
3.1.1在已经知道高度情况下通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。

<div class="parent">
    <div class="child">元素垂直居中</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

3.1.2在不知道高度下当可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

<div class="parent">
    <div class="child">元素垂直居中</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

3.2使用flex+align-items通过设置flex布局中的属性align-items，使子元素垂直居中。

<div class="parent">
    <div class="child">元素垂直居中</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

3.3使用table-cell+vertical-align通过将父元素转化为一个表格单元格显示（类似和），再通过设置 vertical-align属性，使表格单元格内容垂直居中

<div class="parent">
  <div class="child">元素垂直居中</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

3.4.利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

3.5利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 20rem;
}

元素水平垂直居中的方式

1.在明确高度和宽度情况下
1.1绝对定位与负边距实现兼容所有浏览器

		.box{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			/*css核心代码*/
			      position: absolute;
			      top: 50%;
			      left: 50%;
			      margin: -50px 0 0 -50px;
		}
		.box1{
			width: 1000px;
			height: 1000px;
			background-color: #000;
			/*css核心代码*/
			position: relative;
		}

	<div class="box1"><div class="box">水平居中</div></div>

1.2绝对定位与margin:auto 这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。

		.box{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			/*css核心代码*/
			  position: absolute;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  margin: auto;
		}
		.box1{
			width: 1000px;
			height: 1000px;
			background-color: #000;
			/*css核心代码*/
			position: relative;
		}

	<div class="box1"><div class="box">水平居中</div></div>

2.在不知道高度宽度情况下（当然在高度和宽度已知也可用）
2.1绝对定位+transform CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。

  #container {
      position: relative;
    }
  #center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

2.2flex布局利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。

   #container {//直接在父容器设置即可
      height: 100vh;//必须有高度
      display: flex;
      justify-content: center;
      align-items: center;
    }

2.3flex/grid与margin:auto(最简单写法)容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

  #container {
      height: 100vh;//必须有高度
      display: grid;
    }
  #center {
      margin: auto;
    }

2.4当要被居中的元素是inline或者inline-block的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

#container{//父级元素加
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

2.5屏幕上水平垂直居中屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

    <style>
        .outer {
            display: table;
            position: absolute;
            height: 100%;
            width: 100%;
        }
        .middle {
            display: table-cell;
            vertical-align: middle;
        }
        .inner {
            margin-left: auto;
            margin-right: auto;
            background: #2b2b2b;
            color:#fff;
            padding: 2rem;
            max-width: 320px;
        }
    </style>

<div class="outer">
    <div class="middle">
        <div class="inner">
            <p>水平垂直居中</p>
        </div>
    </div>
</div>

参考1
参考2
参考3

_Boboy

关注

10
点赞
踩
67

收藏

觉得还不错? 一键收藏
5
评论
CSS如何让元素水平，垂直，水平且垂直居中（最全集）

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。元素水平居中的方式1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table),...
复制链接

扫一扫