CSS垂直居中

最新推荐文章于 2024-06-28 14:02:41 发布

minisal

最新推荐文章于 2024-06-28 14:02:41 发布

阅读量138

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/xx_yan/article/details/105217419

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS垂直居中

transform: translateY(-50%)

1）使用top: 50%使得元素上边界偏移至页面竖直方向上的中心线
2）使用position: relative使得实际展示的元素相对于本身位置进行偏移
3）使用transform: translateY(-50%)使得实际展示的元素向上移动自身高度的一半

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
  	html,body{
            width: 100%;
            height: 100%;
            margin: 0;
           }
	.content{
            width: 300px;
            height: 300px;
            background: orange;    
            position: relative;
            top: 50%;
            transform: translateY(-50%);
          }
  </style>
 </head>
 <body>
 	<div class="content"></div>
 </body>
</html>

flex

1）外层使用display:flex
2）外层使用flex-direction: column指定排布为竖直方向
3）外层使用justify-content: center表示内部元素向中间对齐
4）内部元素的height需小于外部元素的height

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
    .box {
	    width: 300px;
	    height: 300px;
	    background: #ddd;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	.child {
	    height: 100px;
	    background: orange;
	}
  </style>
 </head>
 <body>
 	<div class="box">
 		<div class="child"></div>
 		<br>
 		<div class="child"></div>
 	</div>
 </body>
</html>

position: absolute + margin: -50px 0 0 0;

1）外层元素position: relative|absolute|fixed（若外层元素position: static，子元素无法使用父级元素定位）
2）内层元素position: absolute绝对定位，根据首个position不为static的祖先类进行定位
3）top: 50%：内层元素的上边界距离祖先类的上边界为祖先类高度的50%
4）margin: -50px 0 0 0; 50px = child.height/2 使得内层元素再上移自身高度的一半，使得内层元素与外层元素的垂直中心线重合

兼容性较好，但是需要知道子元素的高度

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
	.box {
	    width: 300px;
	    height: 300px;
	    background: #ddd;
	    position: relative;
	}
	.child {
	    width: 150px;
	    height: 100px;
	    background: orange;
	    position: absolute;
	    top: 50%;
	    margin: -50px 0 0 0;
	}
  </style>
 </head>
 <body>
 	<div class="box">
 		<div class="child"></div>
 	</div>
 </body>
</html>

position:absolute + margin:auto

1）外层元素position: relative|absolute|fixed（若外层元素position: static，子元素无法使用父级元素定位）
2）内层元素position: absolute绝对定位，根据首个position不为static的祖先类进行定位，即父类box
3）top: 0; bottom: 0; 规定子元素盒模型的position上下距离相等
4）margin: auto自动设置子元素margin，使得子元素盒模型外边距margin和父元素盒模型内容content的距离为top和bottom设定的值。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
	.box {
	    width: 300px;
	    height: 300px;
	    background: #ddd;
	    position: relative;
	}
	.child {
	    width: 150px;
	    height: 100px;
	    background: orange;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    margin: auto;
	}
  </style>
 </head>
 <body>
 	<div class="box">
 		<div class="child"></div>
 	</div>
 </body>
</html>

line-height 垂直居中单行文本

1）line-height= 300px;设置文本的显示高度。范围为content从上至下300px
2）对于子元素，设置vertical-align: middle;，即文本显示范围内向中间对齐

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
	.box{
	    width: 300px;
	    height: 300px;
	    background: #ddd;
	    line-height: 300px;
	}
	.box div {
	    vertical-align: middle;
	}
  </style>
 </head>
 <body>
 	<div class="box">
 		<div>balabala</div>
 	</div>
 </body>
</html>

display:table + vertical-aline:middle

1）父元素display: table;设置展示模式为表格
2）子元素display: table-cell;作为父元素表格的一个单元格
3）子元素vertical-align: middle;表示单元格内容对齐方式为居中对齐

vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的等等

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
	.box {
	    width: 300px;
	    height: 300px;
	    background: #ddd;
	    display: table;
	}
	.child {
	    display: table-cell;
	    vertical-align: middle;
	}
  </style>
 </head>
 <body>
 	<div class="box">
 		<div class="child">balabala</div>
 	</div>
 </body>
</html>

minisal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS垂直居中

CSS垂直居中transform: translateY(-50%)flexposition: absolute + margin: -50px 0 0 0;transform: translateY(-50%)1）使用top: 50%使得元素上边界偏移至页面竖直方向上的中心线2）使用position: relative使得实际展示的元素相对于本身位置进行偏移3）使用transform: ...
复制链接

扫一扫