6種CSS水平垂直置中解決方案

本文主要和大家介紹了CSS水平垂直置中解決方案(6種)的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

準備

建立元素

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

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