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>
相关文章
|
4月前
|
存储 缓存 前端开发
常见的css优化方案都有那些
【7月更文挑战第7天】 - 合并压缩CSS减少HTTP请求,提高加载速度。 - 精简选择器,避免复杂嵌套和通配符,提升渲染效率。 - 利用继承和公共样式减少重复代码。 - 减少浮动和定位,使用Flexbox或Grid优化布局。 - 避免CSS表达式,使用CSS Sprites减少请求。 - 控制重排重绘,减少性能消耗。 - 利用CSS变量和现代布局技术提高灵活性。 - 服务器端启用GZIP压缩,客户端缓存CSS。 综合优化可显著提升网页性能。
51 4
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
79 0
|
4月前
|
前端开发 JavaScript
【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案
【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案
36 0
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
前端开发 JavaScript Serverless
前端工程化的前端性能的性能优化方案的渲染层面优化之CSS/JS优化
渲染是一种非常重要的前端性能优化方案,因为它可以在不同的环境中提高网页的响应速度和可接受性。
91 2
|
移动开发 前端开发 JavaScript
css模块化的方案
css模块化的方案
137 0
|
监控 前端开发 JavaScript
React CSS-In-JS 方案 : Linaria Vs Styled-Components
在开发一个 React 应用时,其中一个比较大的挑战就是为应用选择一个合适的样式处理方案。因为我们需要考虑到样式的可维护性,开发体验,以及样式对应用性能的影响等
221 0
React CSS-In-JS 方案 :  Linaria Vs Styled-Components
|
Web App开发 前端开发 JavaScript
CSS渐进增强方案
CSS渐进增强方案
105 0
jira学习案例31-css-in-js方案
jira学习案例31-css-in-js方案
68 0
jira学习案例31-css-in-js方案
|
Web App开发 前端开发 安全
【flexbox弹性布局学习指南】CSS热门布局方案
我们的 CSS flexbox 布局综合指南。这份完整的指南解释了有关 flexbox 的所有内容,重点介绍了父元素(flex 容器)和子元素(flex 项)的所有不同可能属性。它还包括历史、演示、模式和浏览器支持图表。
【flexbox弹性布局学习指南】CSS热门布局方案