6种CSS水平垂直居中解决方案

PHP中文网 • 2025年3月10日 23:53:58 • 编程技术 • 阅读 2

本文主要和大家介绍了css水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

准备

创建元素

child

登录后复制

垂直水平居中方案一：知道宽度的情况下 absolute+margin负值

.parent {  width:400px;  height:400px;  background: red;  position: relative;}.child {  position: absolute;  left:50%;  top:50%;  background: yellow;  width:50px;  height:50px;  margin-left:-25px;  margin-top:-25px;}

登录后复制

垂直水平居中方案二：不知道宽高的情况下 absolute+transform

立即学习“前端免费学习笔记（深入）”；

.parent {  width:400px;  height:400px;  background: red;  position: relative;}.child {  position: absolute;  left:50%;  top:50%;  transform: translate(-50%,-50%);}

登录后复制

垂直居中方案三：position+margin:auto

.parent {  position:relative;  width:200px;  height:200px;  background: red;}.child {  width:80px;  height:40px;  background: yellow;  position: absolute;  left:0;  top:0;  right:0 ;  bottom:0;  margin:auto;}

登录后复制

垂直居中方案四：+ 多行文本的垂直居中 :table-cell+vertical-align:middle;

.parent {    height: 300px;    width:400px;    border: 1px solid red;    display: table-cell;    vertical-align: middle;    text-align: center;}.child {  display: inline-block;  width:50px;  height:50px;  background: blue;}/* 或者 */.parent {    width: 400px;    height: 300px;    display: table-cell;    vertical-align: middle;    border: 1px solid red;    text-align: center;}.child {    display: inline-block;    vertical-align: middle;    background: blue;}

登录后复制

垂直居中方案五：display: flex

.parent {  width:400px;  height:200px;  background:red;  display: flex;  justify-content:center;  align-items:center;}.child {  height:100px;  width:100px;  background:green;}

登录后复制

垂直居中方案六：伪元素

.parent {  width:200px;  height:200px;  background:red;  text-align: center;}.child {  height:100px;  width:100px;  background:yellow;  display: inline-block;  vertical-align: middle;}.parent:before {  content:"";  height:100%;  vertical-align: middle;  display: inline-block;}

登录后复制