CSS居中方案介绍-阿里云开发者社区

开发者社区> 开发与运维> 正文

CSS居中方案介绍

简介: 介绍常见的css居中方案

1. 水平居中

1.1. transform居中

通过transform居中的核心思想是让居中元素先通过margin-left属性向右移动50%,然后再利用transform属性左移元素宽度的一半,从而达到居中的效果:

.parent {
  position:relative;
  width: 300px;
  height: 400px;
  background-color: red;
}

.child {
  position: absolute; /*第一个position不为static的父元素为其父元素*/
  width: 200px;
  height: 200px;
  background-color: yellow;
  left: 50%;
  transform: translateX(-50%);
}

<div class="parent">
  <div class="child"></div>
</div>

centerlayout1.png

1.2. flex居中

利用flex居中是一种更为简单的方式,通过设置父元素的justify-contentcenter即可。

.parent2 {
  margin-top: 20px;
  width: 300px;
  height: 100px;
  display: flex;
  justify-content: center;
  background-color: red;
}

.child2 {
  background-color: yellow;
}

<div class="parent2">
  <div class="child2">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

centerlayout2.png

1.3. inline-block

通过将块级子元素设置inline-block属性,然后再将父元素的text-align属性设置为center即可:

.parent1 {
  text-align: center;
  width: 300px;
  height: 30px;
  background-color: red;
  margin-top: 30px;
}

.child1 {
  display: inline-block;
  background-color: yellow;
}

<div class="parent1">
  <div class="child1">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

centerlayout3.png

1.4. margin居中

通过设置子元素的margin来使其居中:

.parent3 {
  position:relative;
  width: 300px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

.child3 {
  position: absolute; /*第一个position不为static的父元素为其父元素*/
  width: 200px;
  background-color: yellow;
  left: 0;
  right: 0;
  margin: 0 auto;
}

<div class="parent3">
  <div class="child3">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

2. 垂直居中

2.1 translate居中

.parent4 {
  position:relative;
  width: 300px;
  height: 400px;
  background-color: red;
  margin-top: 20px;
}

.child4 {
  position: absolute; /*第一个position不为static的父元素为其父元素*/
  width: 200px;
  height: 200px;
  background-color: yellow;
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent4">
  <div class="child4">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

centerlayout4.png

同样的,结合1.1就可以实现水平、垂直居中:

.parent5 {
  position:relative;
  width: 300px;
  height: 300px;
  background-color: red;
  margin-top: 20px;
}

.child5 {
  position: absolute; /*第一个position不为static的父元素为其父元素*/
  width: 200px;
  height: 200px;
  background-color: yellow;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0);
}

<div class="parent5">
  <div class="child5">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

centerlayout5.png

2.2 flex居中

利用flex的align-items属性可以解决flex的垂直居中:

.parent6 {
  margin-top: 20px;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: red;
}

.child6 {
  background-color: yellow;
}

<div class="parent6">
  <div class="child6">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

同样的,结合1.2可以做到水平、垂直均居中:

.parent7 {
  margin-top: 20px;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.child7 {
  background-color: yellow;
}

<div class="parent7">
  <div class="child7">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

centerlayout6.png

2.3 绝对定位

利用绝对定位同样可以实现垂直居中:

.parent8 {
  position:relative;
  width: 300px;
  height: 200px;
  background-color: red;
  margin-top: 20px;
}

.child8 {
  position: absolute; /*第一个position不为static的父元素为其父元素*/
  width: 200px;
  height: 100px;
  background-color: yellow;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
<div class="parent8">
  <div class="child8">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

再参考1.4的方案,可以做到水平,垂直均居中:

.parent9 {
  position:relative;
  width: 300px;
  height: 200px;
  background-color: red;
  margin-top: 20px;
}

.child9 {
  position: absolute; /*第一个position不为static的父元素为其父元素*/
  width: 200px;
  height: 100px;
  background-color: yellow;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0px;
  margin: auto auto;
}

<div class="parent9">
  <div class="child9">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章