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

前端  /  管理员 发布于 7年前   372

准备

创建元素

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

垂直水平居中方案一：知道宽度的情况下 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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。