CSS中的垂直居中

OnTheRoad_ING

已于 2022-09-04 11:27:51 修改

阅读量124

点赞数

分类专栏： HTML+CSS 文章标签： css css3 html 垂直居中前端

于 2022-08-07 20:03:16 首次发布

本文链接：https://blog.csdn.net/OnTheRoad_ING/article/details/126215850

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方式一：line-height 使文本居中

HTML

<div c lass="container">
	<div class="box"></div>
</div>

CSS

.box{
  width: 150px;
  height: 100px;
  line-height: 100px;
  background-color: red;
}

在这里插入图片描述

方式二：line-height 使盒子居中（局限）

子元素必须有文本
子元素必须为行内级元素
父元素和子元素的字体大小必须相同

HTML

<div c lass="container">
	<div class="box">xxx</div>
</div>

CSS

.container{
  width: 500px;
  height: 300px;
  background: #ddd;
  line-height: 300px;
}
.box{
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: red;
  line-height: 100px;
}

在这里插入图片描述

方式三：绝对定位 + transform:translate

HTML

<div class="container">
	<div class="box"></div>
</div>

CSS

.container{
  width: 500px;
  height: 300px;
  background: #ddd;
  position: relative;
}
.box{
  width: 150px;
  height: 100px;
  background: red;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

在这里插入图片描述

方式四：绝对定位 + margin

HTML

<div class="container">
	<div class="box"></div>
</div>

CSS

.container{
  width: 500px;
  height: 300px;
  background: #ddd;
  position: relative;
}
.box{
  width: 150px;
  height: 100px;
  background: red;
  position: absolute;
  top:0;
  bottom: 0;
  margin: auto 0;
}

在这里插入图片描述

方式五：flex布局

HTML

<div c lass="container">
	<div class="box"></div>
</div>

CSS

.container{
  display: flex;
  align-items: center;
 
  width: 500px;
  height: 300px;
  background: #ddd;
}
.box{
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: red;
}